jQuery滑块最小范围答案

【问题标题】：jQuery slider minimum rangejQuery滑块最小范围
【发布时间】：2018-09-24 17:44:40
【问题描述】：

我正在尝试通过关注https://jqueryui.com/slider/#range 来通过 jQueryUI 实现价格范围。

我的代码是：

<!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 进行参数化（它可以在工作期间更改）。

如何解决我的问题？

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

像这样更新你的幻灯片功能：

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

该条件检查第一个值加 10 是否大于第二个值。如果是，则退出该功能。

【讨论】：

【解决方案2】：

请使用滑块功能：

添加差异参数并在滑块的滑动功能中使用：

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

【讨论】：