Range sldier
ES6 range slider
key features
- Build using ES6 classes
- Lightweight
- Easy customizing
- gradient slider with update color value
How to use
include necessary files
<head>
<link rel="stylesheet" href="dist/css/slider.css">
</head>
<body>
...
<script type="text/javascript" src="dist/js/slider.js"></script>
</body>HTML markup
you need an input to output the value in it
<input id="slider-1">
<script>
let s1 = new Slider('#slider-1', {
gradient: ['#FFE344', '#38E4B7'],
min: 0,
max: 100,
step: 1,
value: 60
});
</script>you can also add value, min, max and step value using input attributes
<input id="slider-2" min="-10" max="10" value="0" step="1">
<script>
let s2 = new Slider('#slider-2');
</script>Settings
| Properties | default | description |
|---|---|---|
| gradient | null | slider gradient array color |
| classes | null | classes to add to range slider |
| colorCode | false | show color code istead of value |
| editable | false | can input the slider value directly |
| label | true | show/hide value label |
| min | 0 | minimum slider value |
| max | 10 | maximm slider value |
| step | 1 | limit the increments value |
| value | 0 | start value |
License
Copyright (c) 2017 Baianat