How to disable mouseScrolling on input range

Question

I have a range input and I want to select its values just when I click on it. The problem is that if you click on the range, left the mouse on the top of the range and scroll the mousewheel it will change the value of the range.

I have already tried by CSS and jQuery, but I can't figure it out how to do it. I also want to define a default value to start the scroll, but I am not managing how.

Here is the fiddle.

    <input type="range" id="range_year_donut" min="" max="" value="" onchange="slideyear()">
            <span id="chosen_year"></span>


   var range_year = d3.select("#range_year_donut");
    
    d3.csv("http://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/final_data_set.csv").then(function(data){
    
        let max = d3.max(data, function(d) {return +d.year});
        let min = d3.min(data, function(d) {return +d.year});
            range_year.attr("min", min)
            .attr("max", max)
            .attr("value", max);
    
     });
    
    function slideyear(){
        let year = range_year.node().value;
    }

score 1 · Accepted Answer · answered Sep 29 '19 at 12:47

You'll need to use "event listeners" to listen for changes/interactions with your page (scrolling, user-input, etc). In the example below I've used the "mouseover" and "wheel" events in conjunction with jQuery's on method¹ (see comments in the code for further explanation):

$(function() {
    // The slider and <span> label
    const
        slider = $("#range_year_donut"),
        sliderLabel = $("#chosen_year");

    // This variable will be whichever element the user has moved their mouse over
    let currentElement = null;

    // Attach event listeners to the document for "mouseover" and "wheel" events
    $(document)
        .on("mouseover", function(e) {
            // Any time the mouse is moved over an element in the document, set currentElement
            currentElement = e.target;
        })
        .on("wheel", function(e) {
            // The "wheel" event is triggered any time the mousewheel is used.
            //
            // If currentElement is the slider then its "ID" attribute will be the same as
            // the "slider" variable defined at the top.
            if (currentElement && currentElement.id === slider.attr("id")) {
                // Calling preventDefault() will cancel the default behaviour, i.e. scrolling
                e.preventDefault();

                console.log("current element is slider; preventing scroll");
            }
        });

    // Rather than using the "onchange" HTML attribute, we can also attach an event listener
    // to the slider using the "input" event.
    slider.on("input", function() {
        // The current value
        const sliderValue = $(this).val();

        // Set the label's text to the value
        sliderLabel.text(sliderValue);
    })

    // For this example, manually trigger the "input" event to update the slider label
    slider.trigger("input");
})

<input type="range" id="range_year_donut" min="-10" max="10" value="0" />
<span id="chosen_year"></span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I also want to define a default value to start the scroll, but I am not managing how.

You can set the value using jQuery's val method, e.g.

slider.val(5);

¹ https://api.jquery.com/on/

I have a question, why is better to use the event listener rather than trigger the event from html with onchange? I think is better this way for encapsulation and separation of concerns, there are others reasons? — Catarina Nogueira, Sep 29 '19 at 16:23
Personally I think it's much cleaner to use an event listener rather than mixing the JavaScript with your HTML, but both are perfectly ok. See more discussion here: https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — user7290573, Sep 29 '19 at 18:02
Now I am trying to disable dragging as well. I am trying for a long time and I can't. If you can help me editing your code preventing dragging it will be really cool. — Catarina Nogueira, Sep 29 '19 at 22:01
If you disable both scroll/dragging from a slider then you've pretty much removed everything that makes it a slider in the first place... maybe you should use a different input type? What's the main goal here? — user7290573, Sep 30 '19 at 00:04
In this case I would like to get the value just when the user stop the dragging, but i couldn't do it, so I thought on disabling. But if I was able to get the value just when the user stops dragging and while he is dragging show the values that the user is passing through it will be better. But I got lost on the numerous dragging events I coulnd't do it :( — Catarina Nogueira, Sep 30 '19 at 00:34
`"...get the value just when the user stops dragging and while he is dragging show the values..."` - this is the default behaviour when you use the `input` event (see example here: https://jsfiddle.net/wp471rh6/). Maybe I'm misunderstanding what you're asking for. — user7290573, Sep 30 '19 at 08:58

How to disable mouseScrolling on input range

1 Answers1