@baianat/rangeslider
v0.0.2
Published
ES6 rangeslider
Downloads
3
Readme
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