Set minimum range size in range slider

Hi

I am setting up a job search and an using range slider to find jobs in a certain pay range. My widget code is:

    instantsearch.widgets.rangeSlider({
    container: "#salary_range",
    attribute: 'salary_range',
    precision: 0,
    pips: false,
    step: 20000,
    minRangeSize: 20000,
    autoShift: true,
    tooltips: {
        format: function(rawValue) {
            return '£' + (Math.round(rawValue / 20000) * 20000).toLocaleString();
        },
    },
    cssClasses: {
        root: 'accordion-content',
        handle: [
            'RefinementList',
        ],
    },
}),

I am rounding the tooltips to only show the nearest 20,000 which matches the steps.

But, in addition I also what to have a minimum range size so that the user can only select say £40,000-£60,000 or £80,000-£100,000, it would also be nice to shift both handles accordingly if one reaches the minimum range width.

Any clues or pointer welcome.

Thanks

The vanilla JavaScript rangeSlider supports min and max options – does that accomplish what you need?

Hi Chuck

Thanks for your reply.

No it’s not min an max I need, I want to set a minimum allowable difference between the lower and higher slider values.

Thanks
Marcus

Got it. That’s not a feature of the built in rangeSlider widget, but you could always use a different rangeSlider and wire it in using a connector.

Here’s an example using a rheostat slider:

Thanks Chuck, I’ll give that a go.