Is it possible to snap handle to nearest mark?

[JChristensen97]

I've implemented this slider to use marks and I've also set included={false} to allow the sliding motion of the handle. If a user lets go of the handle in between two marks, I would like the handle to auto-slide to the nearest mark. Is this possible?

[dsincl12]

step={null}

If I understood you correctly I had the same problem and here is how I solved it:

First I have the Slider:

<Slider
    min={30}
    max={500}
    step={1}
    defaultValue={60}
    marks={marks}
    onChange={onChangeSlider}
    onAfterChange={setClosestSliderMark}
    value={sliderValue}
    ...
/>

If you set step to null it does snap to a mark but the handle just jumps. If you set it to 1 it will look fluid and you can put the handle where you want.
You also need the onChange for that to work though:

const onChangeSlider = (value) => {
    setSliderValue(value)
} 

All this does in my case is update the variable sliderValue. This is needed for the handle to actually move.

Now comes the onAfterChange which I use to snap the handle to the nearest mark:

const setClosestSliderMark = debounce((value) => {
    setSliderRadiusValue(sliderSnapValue(marks, value))
}, 100)

I use debounce here so that I can click on the track and have the handle first jump to where I click, otherwise it would directly fire onAfterChange which doesn't look as good imo.
All that setSliderRadiusValue does is set the value of the Slider and the value of a variable that I need later to the nearest mark value which I get through sliderSnapValue which looks like this:

const sliderSnapValue = (marks, value) => {
    const markArray: number[] = Object.values(marks)
    let smaller
    let bigger
    
    if (value <= 45) { return 30 }
    
    for (let i = 1; i < markArray.length - 1; i++){
        smaller = (((+markArray[i-1]) + (+markArray[i])) / 2)
        bigger = (((+markArray[i+1]) + (+markArray[i])) / 2)
        
        if(value > smaller && value <= bigger){
            return (+markArray[i])
        } 
    } 
    return 500
}

This compares the slider value when you let go, to the middles between two marks for all except the end points. afterwards it returns the value of the mark that is the closest to the handle.

I hope this helps.

[jnachtigall]

Since #757 has been merged, this can be closed. fyi @afc163

For snapping to nearest mark just use `step={null} as outlined in #574 (comment)