search

zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

Wrong placement for elements with negative number #275

Open shinspiegel opened 1 year ago

shinspiegel commented 1 year ago

Description

It appears that some calculation for the position breaks if there are values with a negative number. In special if we have marks defined. With multiple buttons, some of them also break.

CodeSandbox

Minimum Example

Edit zillow/react-slider

kris-ellery commented 1 year ago

react-slider does not support negative values. We would need to add it as a new feature.

axelboc commented 1 year ago

Best way is to set the min/max/step of the slider to whole integer numbers, say 0 to 100 with a step of 1, and then use a scale (e.g. d3-scale's linear scale) to go from your negative domain to the range of the slider and back. You can write a small wrapper component to abstract this complexity away.