@mougli/circular-slider
Advanced tools
Readme
Javascript Circular Slider
You can see live demo here
Just add a link to the css file in your <head>:
<!-- Add the circular-slider.css styles (load it from lib folder) -->
<link rel="stylesheet" type="text/css" href="https://github.com/MougLee/circular-slider/blob/master/lib/circular-slider.css"/>
Then, before your closing <body> tag add javascript file from the dist folder:
<script type="text/javascript" src="/path/to/dist/circular-slider.min.js"></script>
You still need to import css files
<link rel="stylesheet" type="text/css" href="https://github.com/MougLee/circular-slider/blob/master/lib/circular-slider.css"/>
# Bower
bower install --save @mougli/circular-slider
# NPM
npm install @mougli/circular-slider
Once you install/add the files the files, you can instantiate the slider:
const options = {container: 'slider', color: "#5d3b6d", max: 100, min: 0, step: 1, radius: 190, valueChange: val => console.log("Value changed: " + val)};
const slider = new CircularSlider(options);
// read current value
console.log(slider.currentValue);
//set step programmatically
slider.stepNo = 25;
| Option | Type | Default | Description |
|---|---|---|---|
| container | string | slider | Id of the container div where we want to create a slider. |
| color | string | green | Progress bar color. |
| min | integer | 100 | Minimum value that can be set. |
| max | integer | 0 | Maximal value that can be set. |
| step | integer | 1 | The minimal step between two values - e.g. min = 0, max = 100, step = 10 - user can move between multiples of 10 between 0 and 100. |
| radius | integer | 50 | The slider will adjust to the size of the container automatically. Radius 200 means slider will be touching the boundaries. |
| valueChange | function | undefined | A callback function that is called whenever the slider value changes step. New value is passed in as a parameter. |
function(newValue) {
console.log(newValue);
}
// or as lambda function
const valueChange = newVal => console.log(newVal);
Important! Please note that radius is relative to the container size - 200 is maximum and means 100% of the container. The slider will adjust the to the size of the container automatically. Radius 200 means slider will be touching the boundaries.
Slider is responsive/mobile friendly and works on IE9+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
Copyright (c) 2018 Matic Balantič
Licensed under the MIT license.
FAQs
Javascript Circular Slider
We found that @mougli/circular-slider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.
Security News
The June TC39 meeting wrapped up this week with eight proposals moving on to the next stage. Here's a quick roundup of the features that the committee approved to advance.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.