Search code examples
jquerysliderrangefixed

disable opposit direction in range slider


I am using a range slider in my site. The slider point/head jumps in certain point for example.In defaults it is set to number five the it can jump in number 4 or 6 etc. I want such a way that if I choose one number then I can not change it back or can not choose the other. That means I want to give only one chances to choose a number. Here is the code what I am using to show the slider. Please help me or suggest me a plugins with this functionality. thanks

var sliderAmountMap2 = [1,2,3,4,5,6,7,8,9,10];

$(function() {
    $( "#slider2" ).slider({
        value: 4, //array index of onload selected default value on slider, for example, 45000 in same array will be selected as default on load
        min: 0, //the values will be from 0 to array length-1
        max: sliderAmountMap2.length-1, //the max length, slider will snap until this point in equal width increments



    });

});

Here is the HTML code

*

<div class="the_slider2">
                    <div id="slider2"></div>



                </div>
                <div class="slider2_bottom_txt">
                    <table >
                        <tbody>
                            <tr>

                                <td >1</td>
                                <td>2</td>
                                <td >3</td>
                                <td >4</td>
                                <td >5</td>
                                <td >6</td>
                                <td >7</td>
                                <td >8</td>
                                <td >9</td>
                                <td >10</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

*


Solution

  • If you want the user to disable the slider from very beginning add

     $("#slider2").slider({ disabled: true});
    

    SEE DEMO HERE

    Or else if you want the user to select it only once disable slider in change events

    change: function (event, ui) {
                $("#slider2").slider({
                    disabled: true
                });
    

    SEE DEMO HERE