CODEWITHSUNDEEP
jqueryuislider
ishan joshi
ishan joshi

Reputation: 270

jquery ui slider stop selecting min and max value same

I am using Jquery UI Slider. I am configuring sliders form database.all thing is working perfectly.

But i want to stop min max value to be same. enter image description here 

<div id="timeRangeSlider" class="slider"></div>
<div id="priceSlider" class="slider"></div>
<div id="areaSlider" class="slider"></div>

configuration slider:

timeRangeSliderConfig = {
    range: true,
    min: 0,
    max: model.TimeRanges.length - 1,
    values: [findIndex(model.TimeRanges, model.MinTime), findIndex(model.TimeRanges, model.MaxTime)],
    step: 1,
    change: function (event, ui) {
        // Set the real value into the inputs
        $('#fromTime').text(model.TimeRanges[ui.values[0]].Months + 'M');
        $('#toTime').text(model.TimeRanges[ui.values[1]].Months + 'M');
    }
};

than in advance.

Upvotes: 0

Views: 679

Answers (1)

user6413674
user6413674

Reputation:

As per your question i understand that you need to stop overlapping sliders

so that you can use below code

//for class lavel for all sliders
$(".slider").slider({
        slide: function(event, ui) {
            if ( (ui.values[0] ) == ui.values[1] ) {
                return false;
            }
        }

    })

;

or

timeRangeSliderConfig = {
    range: true,
    min: 0,
    max: model.TimeRanges.length - 1,
    values: [findIndex(model.TimeRanges, model.MinTime), findIndex(model.TimeRanges, model.MaxTime)],
    step: 1,
    change: function (event, ui) {
        if ( (ui.values[0] ) == ui.values[1] ) {
                return false;
            }
        // Set the real value into the inputs
        $('#fromTime').text(model.TimeRanges[ui.values[0]].Months + 'M');
        $('#toTime').text(model.TimeRanges[ui.values[1]].Months + 'M');
    }
};

Upvotes: 1

Related Questions