Question

我的过滤系统只缺少价格过滤。我需要一个双滑块，所以我使用了noUiSlider。

现在我对JavaScript的了解非常有限，但我可以弄清楚如何将它正确地实现到我的PHP文件中。只有我不知道如何将滑块设置为某个值，当单击“过滤此项”按钮时，滑块的值将转换为我可以使用的php变量。我能想到的最简单的方法是滑块的持续更新值可以作为<input type="hidden">元素插入，其中值是滑块值。

<!-- the actual slider-->
<div id='slider-margin'></div>

<!-- the maximum value-->
<div id='SlidervalueMax'></div>

<!-- I thought of putting the variable from the script down below, that gets the values, into a input type-->
<input type="text" id="SlidervalueMin" value="">

<!-- the minimum value-->
<div id='SlidervalueMin'></div>

<!-- creating the slider and underneath that the value updater-->       
<script>
    var marginSlider = document.getElementById('slider-margin');

noUiSlider.create(marginSlider, {
start: [ <?php 
//I thought of keeping the value the same, when it is posted via the form above
if($_SESSION['Filter'] ==1){
    if($_SESSION['minimalvalue']!= 0){
        echo $_SESSION['minimalvalue'] ;
        }
        else{
            echo"0";
        }
}
else{
    echo"0";
}
?>
, 3000 ],
step: 100,
range: {
    'min': 0,
    'max': 5000
}
});
var marginMin = document.getElementById('SlidervalueMin'),
marginMax = document.getElementById('SlidervalueMax');

marginSlider.noUiSlider.on('update', function ( values, handle ) {
if ( handle ) {
    marginMax.innerHTML = values[handle];
} else {
    marginMin.innerHTML = values[handle];
}
});

</script>

我当然看到过多个相似的主题。但是因为我不知道JavaScript是如何完全工作的所以我真的想要个人解决这个问题。

Answer 1

如果您能够获得最小值（或最大值，如果需要），则可以执行下一步：

将此输入放在表单中。此输入将不可见，但会以与其他输入相同的方式将数据传输到您的php脚本。

<input type="number" name="Slider_Min" id="Slider_Min" value="" hidden>
<input type="number" name="Slider_Max" id="Slider_Max" value="" hidden>

使用此脚本在滑块上更新值时更改值。

marginSlider.noUiSlider.on('update', function (values, handle) {
  if (handle) {
    marginMax.innerHTML = values[handle];
    document.getElementById("Slider_Max").value = values[handle];
  } else {
    marginMin.innerHTML = values[handle];
    document.getElementById("Slider_Min").value = values[handle];
  }
});

请确保页面上的所有ID仅使用一次。 ID必须是唯一的。我之前没有使用过noUIslider，但我希望这会有效。

Answer 2

我曾在项目中做过一次，就像这样：

创建两个（隐藏）输入，用于处理 noUiSlider
使用存储在PHP会话中的值设置值
使用JavaScript读取值并为 noUiSlider

start

创建滑块
更新滑块时，相应地更新字段

这具有以下优点：

JavaScript尽可能地与HTML和PHP分离
您可以拥有多个滑块，只需更改创建输入与实际滑块之间关系的名称
每次调用onupdate时都会缓存DOM元素并且不需要重新查询，这可能很多

＆＃13;

const sliderName = 'range';
const slider = document.querySelectorAll('[data-slider="' + sliderName +'"]')[0];
const sliderInputs = document.querySelectorAll('[data-slider-input="' + sliderName +'"]');

noUiSlider.create(slider, {
  start: [
    sliderInputs[0].value,
    sliderInputs[1].value
  ],
  step: 100,
  range: {
    'min': 0,
    'max': 5000
  }
});

slider.noUiSlider.on('update', function(values, handle) {
  sliderInputs[0].value = values[0];
  sliderInputs[1].value = values[1];
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.js"></script>

<form style="margin-bottom: 50px;">
  <input type="text" name="" value="1000" data-slider-input="range">
  <input type="text" name="" value="4000" data-slider-input="range">
</form>

<div data-slider="range"></div>

＆＃13;

最后，您可以将PHP中的值放入实际的表单字段中：

<input type="text" name="" value="<?php echo $_SESSION['minValue'] ?>" data-slider-input="range">
<input type="text" name="" value="<?php echo $_SESSION['maxValue'] ?>" data-slider-input="range">

演示JSFiddle

Try before buy

获取滑块值到PHP变量

2 个答案: