=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

Circular / linear / react.js

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.

gmatta01/radiaSlider