Custom highValue not working on Android

[Saad-Bashar]

If I set highValue to 500, the high value is always stuck on 100 in android. iOS works fine.

[Saad-Bashar]

@githuboftigran , I was going through the java code. I think there is a bug most probably with setting the high value. If you could check that would be really helpful :)

[githuboftigran]

Thanks for your feedback! Will try to fix this (and other issues) this weekend

[Saad-Bashar]

Great man! Thanks a lot! Btw thanks for this awesome work!

[Saad-Bashar]

I think I fixed that issue but not sure. I changed this line this.highValue = MathUtils.clamp(highValue, lowValue + 1, maxValue); from this to this.highValue = highValue >= maxValue ? highValue : maxValue;

[githuboftigran]

@Saad-Bashar Could you please show the component JSX?

[githuboftigran]

Because I couldn't reproduce the issue

[Saad-Bashar]

Sorry for the late reply, this is what I have:

<RangeSlider
                  selectionColor={colors.primary}
                  blankColor={'#DADADA'}
                  style={{ width: width - 100, height: 20 }}
                  labelStyle={'none'}
                  thumbBorderColor={colors.primary}
                  thumbBorderWidth={1}
                  step={50}
                  min={MIN_VALUE}
                  max={MAX_VALUE}
                  highValue={MAX_VALUE}
                  onValueChanged={(minPrice, maxPrice) => {
                    this.setState({
                      minPrice,
                      maxPrice,
                    });
                  }}
                />

min value = 0 and max value = 500

[githuboftigran]

highValue prop is the value of higher thumb. You should use this prop if you want to set a the value programmatically. Right now you set it every time view is rerendered and slider renders the higher thumb with that value. So the solution is to remove highValue prop. I think I need to change the api, because it's a bit confusing. This is one of my first packages so sorry for these problems :) Will make this slider better once I have time.

Thanks

[Saad-Bashar]

understood. No worries. So if I want to set the higher thumb to the max value, how can I achieve that?

[githuboftigran]

That's a good question. And I think I don't have an answer to it right now. This workaround may work:

const highValueProp = isFirstRendering ? {highValue: MAX_VALUE} : {}
...
max={MAX_VALUE}
{...highValueProp}
onValueChanged={(minPrice, maxPrice) => {
...

I won't close this issue and will leave a comment when I release version 2 Thanks for understanding

[Saad-Bashar]

Thanks a lot!

[Vadym-Kyrylenko]

That's a good question. And I think I don't have an answer to it right now. This workaround may work:

const highValueProp = isFirstRendering ? {highValue: MAX_VALUE} : {}
...
max={MAX_VALUE}
{...highValueProp}
onValueChanged={(minPrice, maxPrice) => {
...

I won't close this issue and will leave a comment when I release version 2 Thanks for understanding

Hello! You are not going to release the second version yet?

[kaytee319]

That's a good question. And I think I don't have an answer to it right now. This workaround may work:

const highValueProp = isFirstRendering ? {highValue: MAX_VALUE} : {}
...
max={MAX_VALUE}
{...highValueProp}
onValueChanged={(minPrice, maxPrice) => {
...

I won't close this issue and will leave a comment when I release version 2 Thanks for understanding

Even this workaround is not setting the initial highValue for android. The initial highValue still remains 100.

[githuboftigran]

Will change the API a bit today, thanks for waiting!

[githuboftigran]

Updated the api, added methods to set high and low values.