Getting a slider value to PHP variable

Question

My filtering system only lacks a price filtering. I needed a double slider for that, so I used noUiSlider.

Now my knowledge of JavaScript is very limited, but I could figure out how to implement it correctly into my PHP file. Only I don't know how I can set the slider to a certain value and when the "Filter this" button is clicked, the value of the slider is converted to a php variable, that I can use. The easiest way I could think of was that the continuously updating value of the slider could be inserted as a <input type="hidden"> element, where the value is the slider value.

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

I've seen multiple similar threads of course. But because I don't know how JavaScript fully works I really want a personal solution to this problem.

Answer 1

If you are able to get the min (or max, if needed) value, you can do next:

Place this input inside your form. This input will not be visible, but will transfe data to your php script in the same way, as other inputs do.

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

Use this script to change values, when they are updated on the slider.

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];
  }
});

Be sure, that all id's on the page are used only once. ID's must be unique. I've not work with noUIslider before, but I hope this will work.

Answer 2

What I did in a project once, was something like this:

• create two (hidden) inputs, that handle the values of noUiSlider
• set the values with the ones stored in the PHP session
• read the values using JavaScript and set the initial start values for noUiSlider
• create the slider
• on update of the slider, update the fields accordingly

This has the following advantages:

• the JavaScript is decoupled as much as possible from HTML and PHP
• you can have multiple of those sliders, just change the name that creates the relationship between the inputs and the actual slider
• the DOM elements are cached and don't need to be re-queried everytime onupdate is called, which could be a lot

---

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];
});

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

---

Finally you can put the values from PHP into to actual form fields:

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

---

Demo on JSFiddle

Try before buy