react rc-slider sensitivity for big range values

Viewed 831

I am working with rc-Slider with quite a big range (min=0, max=300.000). All works completely fine, but I am having an issue on mobile as it is almost impossible to set the exact desired value with the slide because the sensitivity of it is apparently too high for human fingers.

Does anyone know how to solve this problem? Are out there any other possibilities (besides typing the value in an input)?

This is the slider I got so far. The marks helped a bit, but not quite as none of the users who tested it saw that clicking on the marks positions the value to the value of that mark.

<Slider
  label="Einmalbeitrag"
  max={300000}
  min={0}
  unit="Euro"
  type="initial"
  step={250}
  className="initial margin-bottom"
  defaultValue={initSliders.initial}
  marks={{
    1250: '1,25T.',
    25000: '25T.',
    50000: '50T.',
    100000: '100T.',
    150000: '150T.',
    250000: '250T.',
  }}
/>

I appreciate if someone had any thought about this. Thanks!

0 Answers
Related