Jquery范围滑块(设置最小值和最大值)

时间:2015-07-29 08:23:39

标签: jquery

我不知道如何设置最小值和最大值

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI Slider - Range slider</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>

  $(function() {

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

      range: true,

      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>

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

2 个答案:

答案 0 :(得分:1)

这是个玩笑吗?你看过手册吗? https://api.jqueryui.com/slider/#option-max 只需添加params min和max:

$( ".selector" ).slider({
  max: 50
});

答案 1 :(得分:0)

我使用了相同的代码,并且我还想手动设置最小和最大滑块范围。 终于我找到了解决方案:

在隐藏的<form Controller="Documents" Action="UploadSickNote" method="post" enctype="multipart/form-data"> 字段中输入最小值和最大值。 HTML:

<input>

jquery:

 <input type="text" id="d_amount" style="border: 0; color: #ffffff; font-weight: normal;" value="20 - 100" hidden/>