Форум

x3zone · #1 (**permalink**) 19.03.2013, 10:22

Здравствуйте!
Можно ли как то запретить движение ползунка в слайдере выше определённого значения? http://jqueryui.com/slider/#range

рони · #2 (**permalink**) 19.03.2013, 11:25

x3zone,
Вариант ограничение диапазона >400 с небольшой анимацией цвета.

<!doctype html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Slider - Range slider</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
            $(function () {

                $("#slider-range").slider({

                    range: true,

                    min: 0,

                    max: 500,

                    values: [75, 300],

                    slide: function (event, ui) {
                        if (ui.values[1] > 400) {
                            $(".ui-widget-header").animate({
                                "background-color": "#FF0000"
                            }, 1000);
                            return false
                        } else $(".ui-widget-header").css({
                                "background": "#CCCCCC"
                            });
                        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

                    }

                });

                $("#amount").val("$" + $("#slider-range").slider("values", 0) +

                " - $" + $("#slider-range").slider("values", 1));

            });
        </script>
    </head>
    
    <body>
        <p>
            <label for="amount">Price range:</label>
            <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider-range"></div>
    </body>

</html>

x3zone · #3 (**permalink**) 19.03.2013, 12:35

Спасибо!!!А можно ли отменить событие передвижения, например правого слайдера.Что бы его нельзя было двигать вручную, а только програмно?

рони · #4 (**permalink**) 19.03.2013, 22:52

x3zone,
Запрет управлять правым ползунком мышью или клавиатурой, только программно - кнопки << >>

<!doctype html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Slider - Range slider</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
        $(function ()
          {

            $("#slider-range").slider(
              {

              range: true,
              min: 0,
              max: 500,
              values:[70, 300],
              step: 10,
              slide: function (event, ui) {
                  if ($(ui.handle).index() == 2) return false;
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

                },
              change: function (event, ui) {
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                  if (ui.values[1] > 400) {
                    $(".ui-widget-header").animate(
                      {
                      "background-color": "#FF0000"
                      }, 1000
                    );

                  } else $(".ui-widget-header").css(
                      {
                      "background": "#CCCCCC"
                      }
                    );
                }


              }
            );

            $("#amount").val("$" + $("#slider-range").slider("values", 0) +

              " - $" + $("#slider-range").slider("values", 1));

            $('#btn').click(function ()
              {
                var step = $('#slider-range').slider('option', 'step'),
                values = $('#slider-range').slider('values');
                values[1] += step;
                $('#slider-range').slider('values', values)
              }
            )

            $('#btn1').click(function ()
              {
                var step = $('#slider-range').slider('option', 'step'),
                values = $('#slider-range').slider('values');
                values[1] -= step;
                $('#slider-range').slider('values', values)
              }
            )


          }
        );
        </script>
    </head>

    <body>
        <p>
            <label for="amount">Price range:</label>
            <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider-range"></div>
        <input id="btn1" name="" type="button" value="<<">
        <input id="btn" name="" type="button" value=">>">
    </body>

</html>

Форум

Справочник

Discord чат

Курсы javascript