Как смешать несколько слайдеров диапазона jQuery UI вместе? - PullRequest
Новая
       36

Как смешать несколько слайдеров диапазона jQuery UI вместе?

0 голосов
/ 27 мая 2011

Кто-нибудь знает, как смешать несколько перетаскиваемых ползунков в диапазоне jQuery UI?

Образец изображения, показывающий, что я имею в виду: Нажмите здесь

Пример кода для перетаскиваемого слайдера с одним диапазоном: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />

<script type="text/javascript">
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 71,
            max: 109,
            values: [75, 100],
            slide: function( event, ui ) {
                $("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
                $("#min_inches").val(ui.values[0]);
                $("#max_inches").val(ui.values[1]);
            }
        });
        $("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
        $("#min_inches").val($("#slider-range").slider("values", 0));
        $("#max_inches").val($("#slider-range").slider("values", 1));
    });
    </script>

    <p>Size Range: <strong><span id="size-range"></span></strong> <small><em>(drag slider handles below to specify)</em></small></p>

    <div id="slider-range"></div>

    <input type="text" name="min_inches" id="min_inches" value="" />
    <input type="text" name="max_inches" id="max_inches" value="" />

.. пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 27 мая 2011

Посмотрите на это решение: http://www.kelvinluck.com/assets/jquery/ui-slider/slider_test.html

...