https://github.com/maslick/radiaslider

circular/linear knob-style slider
https://github.com/maslick/radiaslider

canvas circular ecmascript2015 es5-javascript es6 javascript linear node nodejs npm-package pure-javascript slider

Last synced: about 2 months ago
JSON representation

circular/linear knob-style slider

• Host: GitHub
• URL: https://github.com/maslick/radiaslider
• Owner: maslick
• License: mit
• Created: 2016-09-07T23:01:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T22:09:17.000Z (about 2 years ago)
• Last Synced: 2024-11-14T03:36:39.176Z (2 months ago)
• Topics: canvas, circular, ecmascript2015, es5-javascript, es6, javascript, linear, node, nodejs, npm-package, pure-javascript, slider
• Language: JavaScript
• Homepage: https://maslick.github.io/radiaSlider/demo/circular.html
• Size: 2.61 MB
• Stars: 19
• Watchers: 2
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# =radiaSlider=

[![npm (scoped)](https://img.shields.io/npm/v/@maslick/radiaslider.svg)](https://www.npmjs.com/package/@maslick/radiaslider)

[![Build Status](https://travis-ci.org/maslick/radiaSlider.svg?branch=master)](https://travis-ci.org/maslick/radiaSlider)

[![npm bundle size (minified)](https://img.shields.io/badge/minified-5Kb-green.svg)](https://www.npmjs.com/package/@maslick/radiaslider)

[![npm no dependencies](https://img.shields.io/badge/dependencies-none-green.svg)](https://www.npmjs.com/package/@maslick/radiaslider)

[![npm download count](https://img.shields.io/npm/dt/@maslick/radiaslider.svg)](https://npmcharts.com/compare/@maslick/radiaslider?minimal=true)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

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

```

[![screenshot](img/radiaslider.png?raw=true "radiaSlider circular")](https://maslick.github.io/radiaSlider/demo/circular.html)

## Demo

[Circular](https://maslick.github.io/radiaSlider/demo/circular.html) / [linear](https://maslick.github.io/radiaSlider/demo/linear.html) / [react.js](https://maslick.github.io/react-radiaslider/demo/)

## Quickstart

- create a canvas and the value field

```html



```

### Circular slider

- import js

```html

```

 - initialize a slider

```js

  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;

    }

  });

```

### Linear slider

- import js

```html

```

 - initialize a slider

```js

  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

  });

```

## Get/set value programmatically

If you want to change the value programmatically, use:

```js

slider.setSliderValue(, );

```

To get the current value:

```js

slider.sliders[].normalizedValue     // current value

slider.sliders[].ang_degrees         // current angle in degrees (circular only)

slider.sliders[].endAngle            // current angle in radians (circular only)

slider.sliders[].value               // current width in pixels  (linear only)

```

![alt tag](img/screenshot1.png?raw=true "radioSlider karandashi")

## Using Node.js

*Radia slider* can be used either in the [Browser](https://github.com/maslick/radiaSlider/tree/master/dist) or in the Node.js environment.

```js

// 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](https://github.com/maslick/react-radiaslider).