Я пытаюсь реализовать диапазон цен через jQueryUI, следуя https://jqueryui.com/slider/#range.

Мой код:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Range slider</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
  </script>

  <style>



        .ui-widget.ui-widget-content {
            border: 1px solid #c5c5c5;
        }

        .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
            border-bottom-right-radius: 3px;
        }

        .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
            border-bottom-left-radius: 3px;
        }

        .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
            border-top-right-radius: 3px;
        }

        .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
            border-top-left-radius: 3px;
        }

        .ui-widget-content {
            border: 1px solid #dddddd;
            background: #ffffff;
            color: #0065ff;
        }

        .ui-slider-horizontal {
            height: .8em;
        }

        .ui-slider {
            position: relative;
            text-align: left;
        }

        .ui-slider-horizontal .ui-slider-range {
            top: 0;
            height: 100%;
        }

        .ui-slider .ui-slider-range {
            position: absolute;
            z-index: 1;
            font-size: .7em;
            display: block;
            border: 0;
            background-position: 0 0;
        }

        .ui-widget-header {
            border: 1px solid #dddddd;
            background: #e9e9e9;
            background-position-x: 0%;
            background-position-y: 0%;
            color: #333333;
            font-weight: bold;
        }

        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
            border: 1px solid #c5c5c5;
            background: #f6f6f6;
            font-weight: normal;
            color: #454545;
        }

        .ui-slider-horizontal .ui-slider-handle {
            top: -.3em;
            margin-left: -.6em;
        }

        .ui-slider .ui-slider-handle {
            position: absolute;
            z-index: 2;
            width: 1.2em;
            height: 1.2em;
            cursor: default;
            -ms-touch-action: none;
            touch-action: none;
        }

  </style>
</head>
<body>

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

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


</body>
</html>

Есть одна проблема с дальностью действия. Я хочу установить минимальный диапазон, который всегда должен находиться между двумя значениями. Это означает, что я могу установить 10 как минимальное расстояние, а пользователь не может сделать два диапазона ближе, чем 10. Например:

1) если первый диапазон установлен на 0, пользователь не может изменить второе значение менее чем на 10

2) если второе значение установлено на 100, пользователь не может изменить первое значение более чем на 90

Значение необходимо параметризовать (оно может измениться в процессе работы) с помощью javascript.

Как можно решить мою проблему?

1
karl person 24 Сен 2018 в 20:44

2 ответа

Лучший ответ

Обновите функцию слайда следующим образом:

if (ui.values[ 0 ] + 10 > ui.values[ 1 ]) {
    return false;
}

Это условие проверяет, больше ли первое значение плюс 10, чем второе значение. Если да, то выйдите из функции.

3
Observer 24 Сен 2018 в 18:01

Используйте функцию ползунка как:

Добавьте параметр разницы и используйте его в функции слайдера:

$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      difference:10,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        var tmpVal = ui.values[ 1 ] - ui.values[ 0 ];
        var minDifference = $( "#slider-range" ).slider( "option", "difference" );
        if(minDifference && tmpVal < minDifference){
           return false;
        }
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
  " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
0
Eitbiz 24 Сен 2018 в 17:58