I created my simple range slider , here is my code
$(".slider").slider({
max: 120,
min: 30
}).slider("pips");
<div class="slider"></div>
I would know how to show above the slider a label with the current value and how to pass the current value to an input hidden form. what should I enter in value="" to get the current slider selected value ?
<input type="hidden" value="" name="setting">
>Solution :
To do what you require hook to either the slide or change events of the slider. The arguments passed to the handler function for these events allow you to access the current value which lets you update the DOM as necessary:
let $label = $('.slider-label');
let $value = $('.slider-value');
$(".slider").slider({
max: 120,
min: 30,
slide: (e, ui) => {
$label.text(ui.value);
$value.val(ui.value);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<p class="slider-label">30</p>
<input type="text" class="slider-value" value="30" name="setting" />
<div class="slider"></div>Also note that slider('pips') is not a valid invocation for the jQueryUI slider plugin and will be causing an error. You should remove that line.