How can I make the slider track MIN/MAX differ from selectable MIN/MAX?

[awaldron]

• [ X ] I have searched existing issues
• [ X ] I am using the latest multi slider version

I'd like the make the MIN/MAX track values different than the MIN/MAX selectable values. In this instance, I'd like an AGE slider track range from 0 to 100, but not allow anyone to slide below 16. Is there anyway to acheive this?

[geo-vi]

Any updates on this?

[jaroslavsiroic]

@awaldron did you manage to achieve this functionality?

[VinitBhavsar]

<MultiSlider enabledOne={true} enabledTwo={true} isMarkersSeparated={true} onValuesChange={(value) => { let val = value.toString().split(",") this.setState({ minAge: val[0], maxAge: val[1] }) }} max={60} min={18} sliderLength={SCREEM_WIDTH - 90} values={[minAge, maxAge]} onToggleOne={() => { }} onToggleTwo={() => { }} allowOverlap={false} minMarkerOverlapDistance={10} minMarkerOverlapStepDistance={10} />

@awaldron try this

[VinitBhavsar]

But this also has an issue that if updated values are [50,55]. one slider marker is one left most again and right slider marker set to right most again. even props : values are [50,55] and min={16} max={60}.

It seems markers are not reset to passed updated value;

example: state : minAge: 18 maxAge: 23

Slider Props: max={80} min={16} // Silder Values Set to 16-80 values={[minAge, maxAge]}

On First Render Silder Markers are at given values

Now Updating state values to 24-30

Markers are rested.

[nicholasc120]

I've managed to do this by setting the min attribute to 0, the max attribute to 100, and then passing in a callback to onValuesChanged. This callback just checks if the value is less than 16, and if it is to just set it at 16.

e.g.

<MultiSlider
            values={[multiSliderValue]}
            sliderLength={280}
            onValuesChange={
                () => {
                    if (multiSliderValue < 16){
                        multiSliderValue = 16
                    }
                    setMultiSliderValue(multiSliderValue)
                }
            }
            min={0}
            max={100}
/>