jQuery滑块最小范围

Question

I'm trying to implement the price range via jQueryUI by following https://jqueryui.com/slider/#range . 我正在尝试通过jpsUI实现价格范围，方法是https://jqueryui.com/slider/#range 。

My code is: 我的代码是：

<!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>

There is one problem with range. 范围有一个问题。 I want to set minimum range that always has to be between two values. 我想设置总是必须在两个值之间的最小范围。 It means that I can put 10 as minimum distance and user can not make two ranges closer than 10. For example: 这意味着我可以将10作为最小距离，并且用户不能使两个距离小于10。例如：

1) if the first range is set to 0 user can not change the second value for less than 10 1）如果第一个范围设置为0，则用户不能将第二个值更改为小于10

2) if the second value is set to 100 user can not change the first value for more than 90 2）如果第二个值设置为100，则用户不能将第一个值更改为90以上

The value has to be parametrized (it could change during the work) via javascript. 该值必须通过javascript进行参数化（可能在工作期间发生变化）。

How is it possible to solve my problem? 怎么可能解决我的问题？

Answer 1

Update your slide function like this: 像这样更新你的幻灯片功能：

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

That condition checks if first value plus 10 is bigger than second value. 该条件检查第一个值加10是否大于第二个值。 If yes then quit the function. 如果是，则退出该功能。

Answer 2

Please use slider function as: 请使用滑块功能：

Add difference parameter and use it in slide function of slider: 添加差异参数并在滑块的滑动功能中使用它：

$( 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 ) );
  } );

jQuery滑块最小范围

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-09-24 18:01:46

解决方案2
0 2018-09-24 17:58:36

jQuery滑块最小范围

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-09-24 18:01:46

解决方案2 0 2018-09-24 17:58:36

解决方案1
3 已采纳 2018-09-24 18:01:46

解决方案2
0 2018-09-24 17:58:36