HTML5 range slider values on the go using jQuery (not UI)

Question

I'm using default HTML5 range slider. It works, but is it possible to change the value of this slider on the go (when mousebutton is clicked on range bar and mouse slides to any side)? Important: is it possible without using jQueryUI, but with jQuery (or pure JS) only?

HTML:

<input type="range" name="oc-max-price" id="oc-max-price" min="390" max="5000" step="10" value="5000">
<span id="oc-max-price-val">5000</span>

jQuery code:

$('#oc-max-price').change(function () {
    var mP = $('#oc-max-price').val();
    $('#oc-max-price-val').text(mP);
    console.log(mP);
});

try .on('input', ....

alexander farkas
– alexander farkas

2015-02-14 18:28:34 +00:00
Commented Feb 14, 2015 at 18:28 — alexander farkas
– alexander farkas, Commented Feb 14, 2015 at 18:28
View the edited answer for pure JS solution.

void
– void

2015-02-14 18:39:59 +00:00
Commented Feb 14, 2015 at 18:39 — void
– void, Commented Feb 14, 2015 at 18:39

void · Accepted Answer · 2015-02-14 18:39:22Z

3

Use oninput

   $(document).ready(function(){
       $('#oc-max-price').on("input", function () {
        var mP = $('#oc-max-price').val();
        $('#oc-max-price-val').text(mP);
        console.log(mP);
    }); 
    });

Pure JavaScript

var input = document.querySelector('#oc-max-price');

var messages = document.querySelector('#oc-max-price-val');

input.addEventListener('input', function()
{
    messages.textContent = input.value;
});

edited Feb 14, 2015 at 18:39

answered Feb 14, 2015 at 18:30

void

36.8k10 gold badges72 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

void Over a year ago

mousemove does not trigger iPhone/iPad or any touch device sadly. So i guess input is anyway better.

max Over a year ago

Is it ok if I use bunch of them (input, touchmove and mousemove)? Or maybe it's "mauvais ton"?

void Over a year ago

Just look at the compatibility developer.mozilla.org/en-US/docs/Web/API/…. I dont think their should be any issue in firefox or IE as it is fully supported. The issue could be machine configuration/situation dependent.

Michelangelo · Accepted Answer · 2015-02-14 18:32:17Z

1

Set an interval: http://jsfiddle.net/2ej2m3kp/

 $('#oc-max-price').mousedown(
    setInterval(function () {
        var mP = $('#oc-max-price').val();
        $('#oc-max-price-val').text(mP);
        console.log(mP);
    }, 100));

answered Feb 14, 2015 at 18:32

Michelangelo

5,9785 gold badges36 silver badges51 bronze badges

Comments

FiLeVeR10 · Accepted Answer · 2015-02-14 18:56:56Z

1

So, like on mousemove & touchmove?

$('#oc-max-price').on('mousemove touchmove', function () {
    var mP = $(this).val();
    $('#oc-max-price-val').text(mP);
});

Here's a fiddle.

edited Feb 14, 2015 at 18:56

answered Feb 14, 2015 at 18:32

FiLeVeR10

2,2651 gold badge14 silver badges13 bronze badges

Collectives™ on Stack Overflow

HTML5 range slider values on the go using jQuery (not UI)

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related