tajo / react-range

🎚️Range input with a slider. Accessible. Bring your own styles and markup.
https://react-range.pages.dev
MIT License
842 stars 97 forks source link

How to disable specific thumb in multi-range slider? #168

Closed MrPhyaeSoneThwim closed 1 month ago

MrPhyaeSoneThwim commented 2 years ago

I am now using react-range lib to add multi-range slider in my project. And I want to disable the specific thumb instead of the whole layout of range slider. Is it possible to do that?

Egr711 commented 2 years ago

Found a workaround. I created a function for the Range onChange so that it only updates the values i want.

const [thumb1, setThumb1] = useState(0)
const [thumb2, setThumb2] = useState(10)

function updateValues(values){
   setThumb2(values[1])
}

<Range
values={[thumb1, thumb2]}
onChange={(values) => updateValues(values)}
...
/>

This will make it so when you click on the first thumb nothing will happen. Just have to set css on the thumb so that if index == 0 cursor is normal