This would be useful. See here for an example:
https://jsfiddle.net/Banandrew/15oo8fxw/

Hello, I am not sure if this is currently possible, but I would like to change the default background from grey to black or something else. Would be nice if this can be a prop in a later implementation.

Have a great day :)

Check this Sandbox. When you click on the Change type button the Sliders has a weird behaviour as It changes the min and value parameter

When initializing the slider value via hardcoded value in settings.start, it renders the slider with that value as expected. But when I pass in a value from state that is fed by a text input field, it has no effect.

Slider handler position is wrong for value=0 when min is set to negative values. The handler starts from the leftmost place and jumps immediately to the correct one on any change.

I thought #20 will fix it didn't happen.
Probably it's another similar bug.

it would be nice to have a label floating around the slide to indicate its value.

Whatever value I set for start under these conditions, start is set to 0

onChange within the slider settings returns the slider value without a mechanism for getting the event call object.

I would expect to be able to access the event object such as:

(e, {value})=>handleSliderChange(e,value)

The simple reason being that I am using the slider within another object where I need to do event.preventDefault().

Hi,

there is a issue with mouseout event.

Steps to reproduce:

1. Press left btn over slider
2. Leave slider
3. Release left btn
4. Move mouse back on slider

• slider is still active

I think it is fixed in #4 can you please merge?

I have two objects that I'm switching between, and the slider pulls it's starting position from a property of the objects. Changing from one object to another changes the data the slider is pulling, but the position of the slider doesn't update to reflect the change. The labels in these screenshots are pulling from the same data and property so the data is definitely updating.

Here's how I've coded the slider for reference

<div id="weight-slider-div">
    <div id="weight-slider">
         <Slider
             color="blue"
             settings={{
                  min: 0,
                  max: 10,
                  start: question.weight,
                  step: 1,
                  onChange: (value) => { this.setQuestionWeight(question, value, pendingWeighting) },
             }}
        />
     </div>
     <Label color="blue">{question.weight}</Label>
 </div>

Hi!

It would be cool if we could have a mouseup event.

Great work!

However, I can't get the discrete mode (setting step: 1) to get the slider to lock to position (as the first item in the demo: https://iozbeyli.github.io/react-semantic-ui-range/)

Here's my code, any idea what I'm doing wrong?
<Slider color='black' inverted={false} settings={ start: this.state.value, min: 0, max: 5, step:1, onChange: (value, meta) => { console.log('test', value, meta); if (meta.triggeredByUser) { this.setState({ value: value }) } } />

Could you please add Typescript support for the library?

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Slider

Using v0.7.0

import React, { useState } from 'react';
import { Segment } from 'semantic-ui-react';
import { Slider } from 'react-semantic-ui-range';

const FilterSlider = () => {
  const [values, setValues] = useState([0, 5000]);
  const settings = {
    start: [0, 5000],
    min: 0,
    max: 5000,
    step: 1,
    onChange: array => {
      setValues(array);
    }
  };
  return (
    <Segment>
      <Slider multiple value={values} color="teal" settings={settings} />
    </Segment>
  );
};

export default FilterSlider;

Result on first render:

What I expect to see

On the demo here (hit the controlled tab):

https://iozbeyli.github.io/react-semantic-ui-range/

The controlled sliders don't move when you type in different numbers.

It would be great if vertical slider is supported. I didn't find any.

If the disabled attribute is set to true and then disabled the style components for the slider (but not the thumb knob) are lost rather than restored to what they were before being disabled.

codesandbox demonstrating issue https://codesandbox.io/s/reverent-sky-89iip?fontsize=14

I cruised through the code and didn't see any immediate reason why this might happen. I'll dig in to this next week but wanted to create an issue in case the reason might be obvious to someone else.

Thank you!

When emulating mobile interface on Chrome Dev Tools:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

Slider cannot be dragged, can only be clicked into place on mobile.

in https://iozbeyli.github.io/react-semantic-ui-range/, set start to any value, the start range does not move. also, if set a value in the input box, the range does not change.

The title says it all. It gets stuck after resizing

• going through other elements if making the window smaller
• not updating the thumb's relative position when making the window bigger (ie. if I make my browser window twice as big, it is going to appear as if the thumb is in the middle).

Reproducible on chrome, edge and opera