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