@baianat/rangeslider

ES6 rangeslider

Usage no npm install needed!

<script type="module">
  import baianatRangeslider from 'https://cdn.skypack.dev/@baianat/rangeslider';
</script>

README

Range sldier

ES6 range slider

key features

  • Build using ES6 classes
  • Lightweight
  • Easy customizing
  • gradient slider with update color value

example

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

MIT

Copyright (c) 2017 Baianat