Как установить минимальное и максимальное значение в слайдере jquery?

Я использую слайдер jquery-filamentgroup. Я хочу ограничить движение ползунка.

JavaScript

$('select#valueA, select#valueB').selectToUISlider({
            sliderOptions: {
                    change:function(e, ui) {
                        return false;

                    }
            },
            labels: 12
        });

HTML

<fieldset>
        <label for="valueA">From:</label>
        <select name="valueA" id="valueA">
            <option value="6am">6:00</option>
            <option value="7am">7:00</option>
            <option value="8am">8:00</option>
            <option value="9am" selected="selected">9:00</option>
            <option value="10am">10:00</option>
            <option value="11am">11:00</option>
            <option value="Noon">Noon</option>
            <option value="1pm">1:00</option>
            <option value="2pm">2:00</option>
            <option value="3pm">3:00</option>
            <option value="4pm">4:00</option>
            <option value="5pm">5:00</option>
            <option value="6pm">6:00</option>
            <option value="7pm">7:00</option>
            <option value="8pm">8:00</option>
            <option value="9pm">9:00</option>
            <option value="10pm">10:00</option>
            <option value="11pm">11:00</option>
            <option value="12pm">12:00</option>
        </select>

        <label for="valueB">To:</label>
        <select name="valueB" id="valueB">
            <option value="6am">6:00</option>
            <option value="7am">7:00</option>
            <option value="8am">8:00</option>
            <option value="9am">9:00</option>
            <option value="10am">10:00</option>
            <option value="11am">11:00</option>
            <option value="Noon">Noon</option>
            <option value="1pm">1:00</option>
            <option value="2pm">2:00</option>
            <option value="3pm">3:00</option>
            <option value="4pm">4:00</option>
            <option value="5pm">5:00</option>
            <option value="6pm">6:00</option>
            <option value="7pm">7:00</option>
            <option value="8pm">8:00</option>
            <option value="9pm" selected="selected">9:00</option>
            <option value="10pm">10:00</option>
            <option value="11pm">11:00</option>
            <option value="12pm">12:00</option>
        </select>
    </fieldset>

Как я могу управлять движением слайдера. Это означает, что если кто-то переместит ползунок в какую-то позицию, мне нужно прагматично переместить ползунок в определенную позицию.

Как я могу это сделать?


slider jquery uislider jquery-ui-slider
person Manivasagan    schedule 01.03.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

плагин не позволяет переопределять минимальное и максимальное значение через элемент выбора, вы должны использовать элемент ввода

<input type="range" name="slider" id="slider" value="0" min="0" max="1"  />

а потом

$('#slider').selectToUISlider();
person Overmachine    schedule 01.03.2013
comment
этот код у меня не работает. Я отредактировал свой вопрос. Пожалуйста, проверьте это и посоветуйте мне. - person Manivasagan; 01.03.2013

arrow_upward
0
arrow_downward

Не совсем уверен, чего вы пытаетесь достичь, но взгляните на примеры кода с веб-сайта jQuery-UI для слайдер.

Вот пример из документов:

Javascript

$(function() {
  $( "#slider-range-min" ).slider({
    range: "min",
    value: 37,
    min: 20,  //valueA
    max: 50,  //valueB
    slide: function( event, ui ) {
      $( "#amount" ).val( "$" + ui.value );
    }
  });
  $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});

HTML

<label for="amount">Maximum price:</label>
<input type="text" id="amount" />
<div id="slider-range-min"></div>

Рабочая демонстрация во фрагментах стека и jsFiddle

$(function () {
  $("#slider-range-min").slider({
    range: "min",
    value: 37,
    min: 30,
    max: 50,
    slide: function (event, ui) {
      $("#amount").val("$" + ui.value);
    }
  });
  $("#amount").val("$" + $("#slider-range-min").slider("value"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>



<label for="amount">Maximum price:</label>
<input type="text" id="amount" />
<div id="slider-range-min"></div>

person KyleMit    schedule 01.03.2013
comment
этот код у меня не работает. Я отредактировал свой вопрос. Пожалуйста, проверьте это и посоветуйте мне. - person Manivasagan; 01.03.2013