Ограничить ползунок jQuery значением другого ползунка - PullRequest
Новая
       8

Ограничить ползунок jQuery значением другого ползунка

4 голосов
/ 24 ноября 2011

Я работал над ситуацией, когда у меня было два ползунка jQuery, которые я взял отсюда: http://jqueryui.com/demos/slider/#rangemin

Мне нужно было ограничить одно на основе значения другого, чтобы они не перекрывались. Я придумал код ниже. Это сработало, за исключением одной очень раздражающей проблемы - когда я перетаскивал ползунки, они проходили мимо друг друга, пока я все еще перетаскивал их, только для восстановления ограниченного значения при отпускании кнопки мыши.

Чисто случайно я нашел решение добавления метода ui.someunknown ('1'); строка ниже.

Итак, мой вопрос, могу ли я сохранить эту строку, не вызывая каких-либо проблем? 

<style type="text/css">
    body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}

    #slider1 .ui-slider-range { background: #8ae234; }
    #slider2 .ui-slider-range { background: #729fcf; }

    #sliderContainer{
        width: 400px;
        margin: 6px 0px;
    }


</style>    
    </head>

    <body>

        <!-- Slider -->
        <div id="sliderContainer">
        <div id="slider1"></div>
        </div>
        <div id="sliderContainer">
        <div id="slider2"></div>
        </div>

        <span id="txt">-</span>
        <span id="txt2">-</span>

    <script>
    $(function(){
        $("#slider1").slider({
            orientation: "horizontal",
            range: "max",
            max: 255,
            value: 50,
            slide: refresh1,
            change: refresh1
        });
        $("#slider2").slider({
            orientation: "horizontal",
            range: "max",
            max: 255,
            value: 30,
            slide: refresh2,
            change: refresh2
        });
    });

    function refresh1(e, ui)
    {
        var slider2 = $("#slider2");

        var v1 = ui.value;
        var v2 = slider2.slider('value');

        if(v1 < v2)
        {
            $("#slider1").slider('value', v2);

            //This is the line that "saves the day"
            ui.someunknownmethod('1');
        }

        $("#txt").text(v1);
    }
    function refresh2(e, ui)
    {
        var slider1 = $("#slider1");

        var v1 = slider1.slider('value');
        var v2 = ui.value;

        if(v2 > v1)
        {
            $("#slider2").slider('value', v1);

            //This is the line that "saves the day"
            ui.someunknownmethod('1');
        }

        $("#txt2").text(v2);
    }

    </script>
    </body>

РЕДАКТИРОВАТЬ: Не используйте метод создания необработанного исключения - он будет работать в большинстве браузеров, конечно, за исключением старых IE, где браузер отображал всплывающее окно сообщения для каждого ошибка обнаружена Это было бы довольно раздражающим для пользователя!

До сих пор я не смог найти то, что искал (кроме переписывания кода пользовательского интерфейса слайдера), поэтому, если кто-то узнает, пожалуйста, опубликуйте его здесь ...

Ответы [ 3 ]

1 голос
/ 24 ноября 2011

вы могли бы сделать что-то вроде 

$("#slider2").slider("option", "min", 25);

или 

$("#slider2").slider("option", "max", 25);

см. http://jqueryui.com/demos/slider/#methods для получения дополнительной информации / методы

0 голосов
/ 02 марта 2018

Вот мои 2 цента (основной slider обновит саб slider min value: 

jQuery(function($){

    var handle1 = $( "#sub" );
    $( "#sub-slider" ).slider({
        min: 12,
        max: 28,
        create: function() {
            handle1.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle1.text( ui.value );
        }
    });

    //#menu-line

    var handle = $( "#main" );
    var main_val;
    $( "#main-slider" ).slider({
        min: 16,
        max: 36,
        create: function() {
            handle.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle.text( ui.value );
            main_val = ui.value;
            $( "#sub" ).text(main_val);
            $( "#sub-slider" ).slider( 'option', 'min', main_val);
        }
    });

});
0 голосов
/ 09 января 2013

Чтение API , кажется, вы можете изменить «min» и «max» также после того, как слайдер уже был инициализирован.Все, что вам нужно сделать, это сохранить параметр slider1 "min" равным параметру slider2 "max", обновляя его при каждом перетаскивании.

...