Show current value and input value-CodePudding

I created my simple range slider , here is my code

$(".slider").slider({
  max: 120,
  min: 30
}).slider("pips");

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

CodePudding user response：

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 >30</p>
<input type="text"  value="30" name="setting" />
<div ></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.