CODEWITHSUNDEEP
jqueryrange
Catarina Nogueira
Catarina Nogueira

Reputation: 1138

How to disable mouseScrolling on input range

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;
    }

Upvotes: 1

Views: 1027

Answers (1)

user7290573
user7290573

Reputation: 1330

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/

Upvotes: 1

Related Questions