=radiaSlider=
a pure JavaScript circular/linear knob-style slider
Features
* works on desktop, mobile and tablets
* small size (minified ~5 Kb)
* no dependencies
* pure JavaScript (ES6)
* browser and Node.js friendly
Demo
Quickstart
- create a canvas and the value field
<canvas id="myCanvas" width="300" height="300"></canvas>
<span id="value1"></span>Circular slider
- import js
<script src="slider-circular.min.js"></script>- initialize a slider
<script>
const slider = new Slider({ canvasId: "myCanvas", continuousMode: true, x0: 150, y0: 150, readOnly: false });
slider.addSlider({
id: 1,
radius: 50,
min: 0,
max: 30,
step: 5,
color: "#104b63",
changed: function (v) {
document.getElementById('value1').innerHTML = "Angle: " + v.deg + " deg, value: " + v.value;
}
});
</script>Linear slider
- import js
<script src="slider-linear.min.js"></script>- initialize a slider
<script>
const slider = new Slider({ canvasId: "myCanvas", continuousMode: true, vertical: false, readOnly: false });
slider.addSlider({
id: 1
width: 50,
min: 0,
max: 30,
step: 5,
color: "#104b63",
changed: function (v) {
document.getElementById('value1').innerHTML = "Width: " + v.width + " px, value: " + v.value;
},
x0: 30,
y0: 30
});
</script>Get/set value programmatically
If you want to change the value programmatically, use:
slider.setSliderValue(<sliderId>, <value>);To get the current value:
slider.sliders[<sliderId>].normalizedValue // current value
slider.sliders[<sliderId>].ang_degrees // current angle in degrees (circular only)
slider.sliders[<sliderId>].endAngle // current angle in radians (circular only)
slider.sliders[<sliderId>].value // current width in pixels (linear only)
Using Node.js
Radia slider can be used either in the Browser or in the Node.js environment.
// ES6 syntax
import CircularSlider from "@maslick/radiaslider";
import LinearSlider from "@maslick/radiaslider/src/slider-linear";
// Node.js syntax
const CircularSlider = require("@maslick/radiaslider");
const LinearSlider = require("@maslick/radiaslider/src/slider-linear");
const circular = new CircularSlider({...});
const linear = new LinearSlider({...});For a React.js example check out this project.