Author: | Objement |
---|---|
Views Total: | 4,567 views |
Official Page: | Go to website |
Last Update: | February 15, 2022 |
License: | MIT |
Preview:

Description:
A range slider is a pretty basic design element typically used in the admin side of a web app or website. It can be used to select a numeric value or range of values or just be used as a fast way to choose one option from many.
This is a simple Vanilla JavaScript-powered range slider UI component with 2 custom thumbs. There is no dependency on jQuery or other frameworks. You can easily customize the color of the thumbs and they move smoothly (not in steps).
How to use it:
1. Insert the stylesheet om-javascript-range-slider.css and JavaScript om-javascript-range-slider.js into the page.
<link rel="stylesheet" href="om-javascript-range-slider.css" /> <script src="om-javascript-range-slider.js"></script>
2. Create an HTML5 range input on the page.
<input type="range" name="pieces" id="inputPieces" multiple value="15,90" />
3. Initialize the OmRangeSlider on this range input and done.
OmRangeSlider.init({ min: 0, max: 100, unit: ' Pcs.', });
4. You can also pass the options via HTML attributes:
<input type="range" name="pieces" id="inputPieces" multiple value="15,90" min="5" max="235" unit=" Pcs." />
5. Set the input value style.
- DEFAULT_COMMA_SEPARATED
- PHP_ARRAY
- ASP_ARRAY
OmRangeSlider.init({ inputValueStyle: OmRangeSliderInputValueStyles.PHP_ARRAY });