CODEWITHSUNDEEP
javascriptjqueryhtml
decoye
decoye

Reputation: 35

Jquery get slider value while changing

I have an issue with a slider that shall give me its constant value while its dragged.

My html code is as follows:

<div class="dimmer">
      <div class="intensity-slider">
        <!--<label for="fader">INTENSITY</label>-->
        <input type="range" min="0" max="100" value="80" class="vertical" orient="vertical" id="fader" step="1" oninput="outputUpdate(value)">
        <output class="output" for="fader" id="intensity">80</output>
        <script>

          function outputUpdate(int) {
          document.querySelector('#intensity').value = int;
          }
        </script>
      </div>
      <div class="blackout">
        <a ontouchstart="" href="#" id="blackout">BO</a>
      </div>
  </div>

Now, I have the output class intensity, and its getting updated while I drag the slider.

I need to get this value now also to be updated for my jQuery consolelog.

Here is my JavaScript code: 

$( "#fader" ).mousedown(function(value) {
    console.log(document.querySelector('#intensity').value);
});

The console logs the value correctly, but instead of getting a stream over the entire dragging process, I get the value where it is when its pressed.

How to fix this?

Upvotes: 3

Views: 4837

Answers (1)

Zac
Zac

Reputation: 1303

Use this code and I believe you will achieve what you were trying to:

$('#fader').change(function(event) {
    console.log(document.querySelector('#intensity').value);
});

The slider gives you a value when you slide it. On sliding, it fires the change event.

UPDATE

You can use the on('slide') method to get to know the value at every point while you slide it.

$('#fader').on('slide', function(event, ui) {
    console.log(ui.value);
});

Here is some detail about the on('slide') event:

slide( event, ui )

Triggered on every mouse move during slide. The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.

Please do refer to this JSFiddle for more details.

Upvotes: 5

Related Questions