Creative Circular Range Slider With JavaScript And SVG

Preview:

Description:

A Javascript library that enables developers to draw circular range slider controls with legend data using plain JavaScript and SVG element.

How to use it:

1. Create a container for the range slider.

<div id="app"></div>

2. Load the main JavaScript app.js at the end of the document.

<script src="app.js"></script>

3. Define range sliders in a JS array as follows:

const mySliders = [
  {
    radius: 100,
    min: 0,
    max: 100,
    step: 10,
    initialValue: 50,
    color: '#fdcb6e',
    displayName: 'Value 1'
  },
  {
    radius: 160,
    min: 0,
    max: 3000,
    step: 100,
    initialValue: 200,
    color: '#0984e3',
    displayName: 'Value 2'
  },
  {
    radius: 40,
    min: 0,
    max: 200,
    step: 10,
    initialValue: 20,
    color: '#d63031',
    displayName: 'Value 3'
  },
  // more range sliders here
]

4. Initialize the range slider app.

const slider = new Slider({
  DOMselector: '#app',
  sliders: mySliders
});

5. Draw the range sliders on the page.

slider.draw();

6. Customize the legend information in the JavaScript.

.slider__legend {
  padding: 1rem 3rem 0 0;
  list-style: none;
}
.slider__legend h2 {
  margin-bottom: 1rem;
}
.slider__legend li {
  display: flex;
  margin-bottom: 1rem;
}
.slider__legend li span {
  display: inline-block;
}
.slider__legend li span:first-child {
  height: 20px;
  width: 20px;
  margin-bottom: -2px;
}
.slider__legend li span:nth-child(2) {
  margin: 0 0.5rem;
}
.slider__legend li span:last-child {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 60px;
}

7. Customize the range slider app by overriding the default parameters in the app.js.

// Slider container
this.DOMselector = DOMselector;
this.container = document.querySelector(this.DOMselector);  
// Slider width
this.sliderWidth = 400;                                     
// Slider length
this.sliderHeight = 400;           
// Slider center X coordinate                         
this.cx = this.sliderWidth / 2;                       
// Slider center Y coordinate      
this.cy = this.sliderHeight / 2;                       
// Tau constant     
this.tau = 2 * Math.PI;       
// Sliders array with opts for each slider                              
this.sliders = sliders;                                     
// Spacing between arc fractions
this.arcFractionSpacing = 0.85;                             
// Arc fraction length
this.arcFractionLength = 10;                                
// Arc fraction thickness
this.arcFractionThickness = 25;        
// Arc fraction color for background slider                     
this.arcBgFractionColor = '#D8D8D8';                    
// Slider handle fill color    
this.handleFillColor = '#fff'; 
// Slider handle stroke color                             
this.handleStrokeColor = '#888888';                         
// Slider handle stroke thickness
this.handleStrokeThickness = 3;                             
// Is mouse down
this.mouseDown = false;                                     
// Stores active (selected) slider
this.activeSlider = null;

Changelog:

08/22/2022

• added condition for TouchEvent check