Enhancing HTML "range" element with mouse scroll functionality for incrementing values in step increments

Question

Enhancing HTML "range" element with mouse scroll functionality for incrementing values in step increments

I'm working on developing a scroll feature that operates independently from the main window's scrolling function. I aim to trigger specific events in the primary window based on interactions with this separate scrollbar.

The only solution I could come up with was to create a vertical input element using type="range".

Here is what I have achieved so far (a small slider displayed on the right side of the window): https://jsfiddle.net/xerxes3117/3v1xdjse/4/

HTML:

<p>
    <input class="slider" type="range" min="0" max="25" step="1" value="0" orient="vertical">
</p>

CSS:

p {
        display: inline-block;
    }

    .slider {
        -webkit-appearance: none;
        width: 270px;
        height: 8px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 50%;
        width: 5px;
        height: 8px;
        background: #283e3e;
        cursor: pointer;
    }

    input[type="range"] {
        transform: rotate(270deg) translate(-140px,480px);
    }

JS:

// Script for creating bars and labels

// On change event for updating styling

Currently, I am encountering two issues with this custom slider:

Whenever there is an event (drag, click, scroll), I want the slider to move by just one step. For example, if I click at any position within the slider, it should advance or regress by a single step rather than jumping directly to the clicked spot.
At present, the slider moves only when clicked and dragged, but not when scrolled (using the mouse wheel). I am looking to enable movement through scrolling as well.

If you know of any existing projects or demos showcasing these functionalities, please share them! Additionally, feel free to suggest alternative approaches aside from utilizing the input type="range" element.

javascript jquery html css d3.js

Answer 1

Answer №1

Take a look at the newly updated JS Fiddle. You can now utilize the d3.zoom event on the svg to adjust the current step.

JS Fiddle

 //Defining width and height
 var w = 600;
 var h = 250;
 var curentStep = 0
 var dataset = [{
     key: 0,
     value: 5
   }, 
   {
     key: 1,
     value: 10
   }, 
   {
     key: 2,
     value: 13
   },
   // Dataset now consists of objects with keys and values.
 ];

 var xScale = d3.scaleBand()
   .domain(d3.range(dataset.length))
   .rangeRound([0, w])
   .paddingInner(0.05);

 var yScale = d3.scaleLinear()
   .domain([0, d3.max(dataset, function(d) {
     return d.value;
   })])
   .range([0, h]);

 var key = function(d) {
   return d.key;
 };

 function zoomFunction() {
   if (d3.event.sourceEvent.deltaY > 0) {
     if (curentStep > 0) {
       curentStep--
     }
   } else {
     if (curentStep < 25) {
       curentStep++
     }
   }
   stepChange()
 }
 var zoom = d3.zoom()
   .on("zoom", zoomFunction);

 var svg = d3.select("body")
   .append("svg")
   .attr("width", w)
   .attr("height", h)
   .call(zoom);

 svg.selectAll("rect")
   .data(dataset, key)
   // Code for creating bars...
   
 svg.selectAll("text")
   .data(dataset, key)
   // Code for creating labels...

 function stepChange() {
   // Functionality related to changing steps...
 }

 d3.select("input")
   .on("change", function() {
     // Update styling when input changes...
   });

Answer 2

Take a look at the newly updated JS Fiddle. You can now utilize the d3.zoom event on the svg to adjust the current step.

JS Fiddle

 //Defining width and height
 var w = 600;
 var h = 250;
 var curentStep = 0
 var dataset = [{
     key: 0,
     value: 5
   }, 
   {
     key: 1,
     value: 10
   }, 
   {
     key: 2,
     value: 13
   },
   // Dataset now consists of objects with keys and values.
 ];

 var xScale = d3.scaleBand()
   .domain(d3.range(dataset.length))
   .rangeRound([0, w])
   .paddingInner(0.05);

 var yScale = d3.scaleLinear()
   .domain([0, d3.max(dataset, function(d) {
     return d.value;
   })])
   .range([0, h]);

 var key = function(d) {
   return d.key;
 };

 function zoomFunction() {
   if (d3.event.sourceEvent.deltaY > 0) {
     if (curentStep > 0) {
       curentStep--
     }
   } else {
     if (curentStep < 25) {
       curentStep++
     }
   }
   stepChange()
 }
 var zoom = d3.zoom()
   .on("zoom", zoomFunction);

 var svg = d3.select("body")
   .append("svg")
   .attr("width", w)
   .attr("height", h)
   .call(zoom);

 svg.selectAll("rect")
   .data(dataset, key)
   // Code for creating bars...
   
 svg.selectAll("text")
   .data(dataset, key)
   // Code for creating labels...

 function stepChange() {
   // Functionality related to changing steps...
 }

 d3.select("input")
   .on("change", function() {
     // Update styling when input changes...
   });

Enhancing HTML "range" element with mouse scroll functionality for incrementing values in step increments

Answer №1

Similar questions

Tips for aligning a div below another div nested within a separate container

Utilizing React Material UI for form validation with error handling and informative helper text

Position an element with absolute positioning to the right edge of a relative element

Tips for creating a POST request using mongoose in NextJS version 13.4

Tips for updating VUE's main.js file to incorporate the routers/index.js configuration

Having trouble getting the CSS 3 Spin feature to work?

Issue with React-Route not displaying components

Comparing AngularJS and Node JS in serving web pages, which is better?

Why does Socket.IO seem to be registering two clients instead of just one when there is only one connection

HTML button failing to connect with CSS stylesheet

What is the best way to utilize mapping and filtering distinct values in an array using TypeScript?

What happens when browsers encounter unfamiliar at-rules?

Guide on how to return a JSON result as a Dictionary instead of an Array using Express.js

Tips for creating a vertical drawer using jQuery and CSS

The concept of recursively exporting modules in Node.js modules

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

The callback for the Ajax request failing before entering the webmethod function

Placeholder text missing in Internet Explorer 11

How can I prevent an endless loop in jQuery?

Looking for a feature where users can easily update their profile using an interactive edit button