Author: | tadejf84 |
---|---|
Views Total: | 1,461 views |
Official Page: | Go to website |
Last Update: | August 22, 2022 |
License: | MIT |
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