Set minimum range size in range slider


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

    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: [

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.


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.


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.