Drag cap at max value

[jwugit]

Is there a way to make it not drag pass the max value?
currently, you can drag and spin muliple round trips.

can we make it not drag pass the min and max value ? just 1 round on the slider?
Thanks,

[fseehawer]

It's currently not possible, I will consider it for a future release.

[mbauchet]

Hi, some news about that? Thanks

[fseehawer]

I'm working on a new version that will have a new range prop. That should cover your case. Can't give you any estimates on when that version will be out though, sorry.

[Janvampierssel]

I have a very clunky fix for now using the props provided. It's not perfect and it breaks with certain drag behavior but it's better than nothing.

The code sets draggable to false when the cap (20 in this case) is reached and resets the position of the knob to the appropriate location.

However for some reason, this only works once and the knob position reset doesn't happen again. Maybe it has something to do with my code.

When you start dragging the knob further again, the value doesn't go up (because of max={20}) but visually it makes a step of one before that gets capped. Basically: it caps, then you can drag it one further then it's supposed to go until it caps again.

fseehawer, please look into implementing a fix!

`
const [draggable, setDraggable] = useState(true);
const [knobPosition, setKnobPosition] = useState(-0.49);

const capSlider = (value) => {
setDraggable(false);
setKnobPosition(value % 10 - 0.49);
}

return(
<CircularSlider
continuous={{
enabled: true,
clicks: 10,
increment: 1,
}}
min={-100}
max={20}
dataIndex={knobPosition}
knobDraggable={draggable}
onChange={ value => { value >= 20 && capSlider(value) }}
isDragging={(dragging) => {!dragging && setDraggable(true)}}
>
)
`