Step Change Transition

[xrawvelocity]

Description

When moving the thumb from one step to the next it snaps and I would like to have it follow the cursor while its being held down and on mouseUp it would snap to the nearest step

Example

This is what I need it to look like:

This is what I have so far:

Code

In the React file:

    <div className="slider-wrapper">
            <ReactSlider
              className="horizontal-slider"
              marks
              invert={false}
              step={1}
              markClassName="slider-mark"
              min={0}
              max={1}
              value={sliderValue}
              onChange={val => setSliderValue(val)}
              thumbClassName={
                sliderValue === 0
                  ? "slider-thumb"
                  : "slider-thumb slider-thumb-1"
              }
              trackClassName="slider-track"
            />
     </div>

In the CSS file: .slider-wrapper { background-color: #f2f2f2; height: 10px; width: 200px; margin-left: 2rem; } .horizontal-slider { width: 100%; max-width: 190px; } .slider-thumb { cursor: pointer; position: absolute; z-index: 100; width: 100px; height: 10px; background-color: #ff3b30; transition: "all .2s ease"; display: block;

&-1 { margin-left: 10px; } } .slider-track { position: relative; } .slider-track .slider-track-0 { left: 0; }

.slider-track .slider-track-1 { right: 0; }

.horizontal-slider .slider-track { height: 10px; }

As you can see I tried using the transition property in the thumb and everywhere else too, and I looked through all the properties in the docs but so far I got nothing. If this is not possible with this package could you guys please recommend another one that does it?

[stonebk]

Unfortunately I don't think this is possible with the current implementation.

One possible workaround would be to use a slider with more values, say values 0-100 rather than 0-1. This would make the slider feel more like it is following the mouse since there are more snap points. You would just have to have some logic on your side to handle translating the 0-100 values to 0-1. Not the cleanest solution, but it might work for you?