【问题标题】:Get the value from slider range function UI javascript从滑块范围函数 UI javascript 中获取值
【发布时间】:2019-06-21 04:29:17
【问题描述】:

我有使用 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 的值,以便我可以输入该字段。 (我应该将字段 min-price 和字段 max-price 的值放在什么位置)

【问题讨论】:

  • 根据您的问题,stackoverflow.com/questions/5801770/… 可能重复。
  • 工作正常吗? jsfiddle.net/f8h95jay
  • @BenM 嗨,亲爱的,我的代码运行良好,我的问题是如何分别获取最低和最高价格的名称字段
  • 您的格式很奇怪,您不需要分隔符内的分隔内容周围的空格
  • 我更新了我的问题亲爱的请检查@Roshan

标签: javascript php


【解决方案1】:

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

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

     $("#select-min-price").val(ui.values[ 0 ]);
     $("#select-max-price").val(ui.values[ 1 ]);
   }
});    
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); });

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-10-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多