Javascript jQuery滑块最小范围_Javascript_Jquery_Html_Css_Jquery Ui

Javascript jQuery滑块最小范围

javascript jquery html css jquery-ui

Javascript jQuery滑块最小范围,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我试图通过以下方式通过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</

我试图通过以下方式通过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>


jqueryui滑块-范围滑块
$（函数（）{
$（“#滑块范围”）。滑块({
范围：对，
分:0,，
最高：500，
数值：[75300]，
幻灯片：功能（事件、用户界面）{
$（“#amount”）.val（“$”+ui.values[0]+“-$”+ui.values[1]）；
}
});
$（“#金额”）.val（$”+$（“#滑块范围”）.slider（“值”，0）+
“-$”+$（“#滑块范围”）。滑块（“值”，1）；
} );
.ui-widget.ui-widget-content{
边框：1px实心#C5C5；
}
.ui角点全部、.ui角点底部、.ui角点右侧、.ui角点br{
边框右下半径：3px；
}
.ui角点全部、.ui角点底部、.ui角点左侧、.ui角点bl{
边框左下半径：3px；
}
.ui角点全部、.ui角点顶部、.ui角点右侧、.ui角点tr{
边框右上角半径：3px；
}
.ui角点全部、.ui角点顶部、.ui角点左侧、.ui角点tl{
边框左上半径：3px；
}
.ui小部件内容{
边框：1px实心#dddddd；
背景：#ffffff；
颜色：#0065ff；
}
.ui滑块水平{
高度：.8em；
}
.ui滑块{
位置：相对位置；
文本对齐：左对齐；
}
.ui滑块水平.ui滑块范围{
排名：0；
身高：100%；
}
.ui滑块.ui滑块范围{
位置：绝对位置；
z指数：1；
字体大小：.7em；
显示：块；
边界：0；
背景位置：0；
}
.ui小部件头{
边框：1px实心#dddddd；
背景：#e9e9e9；
背景位置x:0%；
背景位置y:0%；
颜色：#333333；
字体大小：粗体；
}
.ui状态默认值，.ui小部件内容.ui状态默认值，.ui小部件标题.ui状态默认值，.ui按钮，html.ui按钮。ui状态禁用：悬停，html.ui按钮。ui状态禁用：活动{
边框：1px实心#C5C5；
背景：#f6f6f6；
字体大小：正常；
颜色：#4545；
}
.ui滑块水平.ui滑块手柄{
顶部：-.3em；
左边距：-.6em；
}
.ui滑块.ui滑块句柄{
位置：绝对位置；
z指数：2；
宽度：1.2米；
高度：1.2米；
游标：默认值；
-ms触摸动作：无；
触摸动作：无；
}

价格范围：

射程有一个问题。我想设置最小范围，它必须始终在两个值之间。这意味着我可以把

作为最小距离，用户不能使两个距离小于10。例如：

1）如果第一个范围设置为0，则用户不能更改小于10的第二个值

2）如果第二个值设置为100，用户不能更改第一个值超过90

该值必须通过javascript参数化（在工作过程中可能会更改）

如何解决我的问题？

请使用滑块功能：

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

$( 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,，
最高：500，
差异：10，
数值：[75300]，
幻灯片：功能（事件、用户界面）{
var tmpVal=ui.values[1]-ui.values[0]；
var MindDifference=$（“#滑块范围”）。滑块（“选项”，“差异”）；
if（minDifference&&tmpVal

如下更新幻灯片功能：

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

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