Minimal Vanilla JavaScript Range Slider With 2 Thumbs – OmRangeSlider

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

Preview:

Minimal Vanilla JavaScript Range Slider With 2 Thumbs – OmRangeSlider

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
});

You Might Be Interested In:


Leave a Reply