I'm using the noUiSlider and I'm trying to use the slider value as a form input value (to send it in a working form). I've tried various examples that I could find on stack overflow, but nothing seems to work. This is my slider script:

<script>
var slider = $('#slider');
noUiSlider.create(slider[0], {
    start: [2000],
    range: { min: 2000, max: 10000 },
  step: 500,
  tooltips: true,
  connect: [true, false],
});
</script>

Maybe there's a hint in there why the codes I find aren't working. Because to initiate the slider I somewhere found the code var slider = $('#slider'); to work for me and not var slider = document.getElementById('slider'); as shown in most examples and documentation.

I would appreciate a very simple solution/explanation, as I actually don't know javascript at all...

I'm using the noUiSlider and I'm trying to use the slider value as a form input value (to send it in a working form). I've tried various examples that I could find on stack overflow, but nothing seems to work. This is my slider script:

<script>
var slider = $('#slider');
noUiSlider.create(slider[0], {
    start: [2000],
    range: { min: 2000, max: 10000 },
  step: 500,
  tooltips: true,
  connect: [true, false],
});
</script>

Maybe there's a hint in there why the codes I find aren't working. Because to initiate the slider I somewhere found the code var slider = $('#slider'); to work for me and not var slider = document.getElementById('slider'); as shown in most examples and documentation.

I would appreciate a very simple solution/explanation, as I actually don't know javascript at all...

• javascript
• nouislider

1 Answer 1

noUIslider does not create an html input so I can see 2 easy options.

1- Add a hidden input in your form that will contain the slider value and will be updated each time slider change event is triggered.

<form>
 <div id="slider"></div>
 <input id="sliderValueInput" type="hidden" value=""> 
</form>

<script>
var slider = noUiSlider.create($("#slider")[0], {
    start: [2000],
    range: { min: 2000, max: 10000 },
  step: 500,
  tooltips: true,
  connect: [true, false],
});

//define initial hidden input value with slider value
$("#sliderValueInput").val(slider.get());

//update hidden input value on slider change
slider.on("change", function() {
    $("#sliderValueInput").val(slider.get());
});
</script>

https://codepen.io/anon/pen/mxXYBK

2- Handle your form post data manually at submit with an AJAX request for instance. Demo can be provided if needed...