disable opposit direction in range slider

Question

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>

*

yes i want to disable the slider head or pointer after selecting the value so that it can not move to any other value. — user3396867, Oct 22 '14 at 12:21

score 0 · Accepted Answer · answered Oct 22 '14 at 12:30

0

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

answered Oct 22 '14 at 12:30

Roshan

2,144
2
16
28

thanks. it is working but has some issues. there is more than one value i can choose but it is disabling just after moving it. can we add a time for it say after 3 sec it will disable? thanks for your help – user3396867 Oct 22 '14 at 12:39
As you have told you want the user to change it only once.So I think it is working in same manner – Roshan Oct 22 '14 at 12:42

disable opposit direction in range slider

1 Answers1