@maslick/radiaslider

=radiaSlider=

a pure JavaScript circular/linear knob-style slider

Features

 * works on desktop, mobile and tablets
 * small size (minified ~6 Kb)
 * no dependencies
 * pure JavaScript (ES5)
 * browser and Node.js friendly

Demo

Circular / linear

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>
  var slider = new Slider({ canvasId: "myCanvas", continuousMode: true, x0: 150, y0: 150 });
  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>
  var slider = new Slider({ canvasId: "myCanvas",  continuousMode: true,  vertical: 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. Look for the browser and React.js examples.

License

This project is licenced under the MIT License.