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?

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?

• javascript
• jquery
• html

Share Improve this question Follow edited Nov 8, 2017 at 21:50 Zac 1,30333 gold badges1717 silver badges2828 bronze badges asked Nov 8, 2017 at 19:11 decoyedecoye 3511 silver badge88 bronze badges 5

• 2 use change instead $('#fader').change() – Robbie Milejczak Commented Nov 8, 2017 at 19:13
• 1 Hey Robbie, sorry for asking but i dont really get what you mean. $( "#fader" ).change{}, like so? – decoye Commented Nov 8, 2017 at 19:17
• $('#fader').change() is the change() event being fired. – Zac Commented Nov 8, 2017 at 19:19
• @decoye that's okay, no need to apologize. Simply replace mousedown with change. what .mousedown(function(value)) does is add an event listener that reponds to a mousedown event and calls that function when it registers a mousedown. So .change(function(value)) does the same thing, but it listens for a change in value instead of a mousedown event. Hope that clears things up! – Robbie Milejczak Commented Nov 8, 2017 at 19:24
• hey robbie, exactly the way as i was expecting it, but its not... – decoye Commented Nov 8, 2017 at 19:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.