Show range numbers

[mouveo]

Hello, by default, range numbers are hidden. We need to tap to see them. Is it possible to always show them? I didn't see any properties to manage this need.

[githuboftigran]

@mouveo , labels are meant to help user see current progress while sliding. If you want to show the current progress, you should use onValueChanged prop and add components to your screen which will render proper values (for example 2 Texts on the left and right side). Showing the dragging label to user is a bad UX

[mouveo]

Bad UX to let know easily (without looking for, as we can see in your example) which number matchs with which selector...

Interesting point of view but for me it's the dark side of UX...

When my mom tries your example, she doesn't understand and remember her selection... She needs to do it twice... If numbers were always shown at the top of selector... that would be easier to understand and faster (these are UX principles, aren't they?).

Anyway, it's your dev, your rules!

[githuboftigran]

@mouveo , as I mentioned before, if you want to show (and of course you should) current range to user, you should add 2 texts (on the left and right side maybe?) and update the values. I have never seen a range slider with sticky value labels on thumbs. Here is Airbnb's example: As you can see, they have text inputs at the bottom (in fixed positions) which are updating while user drags the slider.

[mouveo]

Ok, I understand what you mean (even if I need something different ;-)).

Thank you very much for everything (dev and support).

[githuboftigran]

And I'm really open to any kind of suggestions/fixes/improvements. If you still think this is wrong, we can continue discussion, because my goal is to have a nice component and not to be a dictator :D Thank you too for your thoughts and remarks. I appreciate it a lot. Really.

[githuboftigran]

@mouveo BTW if you really need that, you can fork this repo and add your modifications. I can even tell you what you need to change: Just remove the || activeThumb == THUMB_NONE check in onDraw of RangeSlider.java https://github.com/githuboftigran/rn-range-slider/blob/master/android/src/main/java/com/ashideas/rnrangeslider/RangeSlider.java

and || _activeThumb == THUMB_NONE check in drawRect of RangeSlider.m https://github.com/githuboftigran/rn-range-slider/blob/master/ios/RangeSlider.m

This should work ;-)

[batyrkulov]

Thank you for this awesome package

[githuboftigran]

@batyrkulov , thanks for your awesome feedback :)

[JunaidHassanCB]

import {Slider} from '@miblanchard/react-native-slider'; <Slider minimumTrackTintColor={Colors.themeColor} maximumTrackTintColor={Colors.gray} minimumValue={0} maximumValue={100} thumbTintColor={Colors.themeColor} trackStyle={{backgroundColor:Colors.gray}} value={[low,high]} onValueChange={([low,high]) => { console.log(parseInt(low),parseInt(high)); setLow(parseInt(low)); setHigh(parseInt(high)); }} />