从滑块范围功能UI javascript

时间:2019-01-28 07:39:40

标签: javascript php

我具有使用UI和javascript进行价格范围搜索功能的滑块。

这是代码。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>

这是JavaScript。

<script>
$( function() {
$( "#slider-range" ).slider({
  range: true,
  min: 0,
  max: 10000,
  values: [ 2000, 5000 ],
  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>

这是html代码。

<input type="text" id="amount">
<input value="<?php echo "ui.values[ 0 ]";?>" name="min-price" id="select-min-price" type="hidden">
<input value="<?php echo "ui.values[ 1 ]";?>" name="max-price" id="select-max-price" type="hidden">
<div id="slider-range"></div>

我的问题是如何从该滑块范围中获取min和max的值,以便可以将其放入字段中。 (我应该从字段最小价格和字段最大价格中输入什么值)

1 个答案:

答案 0 :(得分:0)

您可以在滑块功能中设置min-price和max-price的值,如下所示:

Temp

您可以在这里看看:https://jsfiddle.net/ashokgharpankar/dy29xkq7/10/