Package Exports

@maslick/radiaslider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@maslick/radiaslider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

=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 });
  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)

alt tag

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.