webroukCustomRange

Webrouk Custom Range Slider is a lightweight native JavaScript web component for custom range slider element.

• No dependencies
• Small and fast
• Fully responsive
• Support touch-devices (Android, iOS, Nexus, etc.)
• Prefixes and suffixes for your numbers ($100, 100k etc.)
• Slider writes its value right into input value field. This makes it easy to use in any html form

Demo

---

CodePen Example

Installation

---

Use NPM to download and install it directly in to your project

$ npm install webrouk-custom-range --save

or include js file manually

<!-- webrouk-custom-range component file -->
<script src="webrouk-custom-range.js"></script>

Usage

---

Using webroukCustomRange is simple. Configuration over attributes.

<webrouk-custom-range start="0" end="1000" from="300" to="700" prefix-char="$">
  <!-- This input will receive the value from the component -->
  <input type="hidden">
</webrouk-custom-range>

Options

Option	Type	Description	Default
start	number	Set slider minimum value	0
end	number	Set slider maximum value	100
from	number	Set start position for left handle	start
to	number	Set start position for right handle	end
prefix-char	string	Set prefix for values. Will be set up right before the number: $ 100	''
suffix-char	string	Set suffix for values. Will be set up right after the number: 100 k	''

Style Customization

---

Expected CSS Variables from inside the component (optional).

webrouk-custom-range {
  --w-primary-color: hsl(218, 95%, 54%);
  --w-text-color: hsl(0, 100%, 100%);
  --w-line-color: hsl(0, 0%, 93%);
}

Styleable Component Parts

---

• root
• value-start
• value-end
• value-from
• value-to
• value-single
• handle
• handle-lower
• handle-upper

Example:

webrouk-custom-range::part(value-start) {
  background-color: cornflowerblue;
}

webrouk-custom-range::part(value-end) {
  background-color: indianred;
}

webrouk-custom-range::part(value-from),
webrouk-custom-range::part(value-to) {
  background-color: blueviolet;
}

webrouk-custom-range::part(value-single) {
  background-color: seagreen;
}

License

---

webroukCustomRange is licensed MIT. It can be used for free and without any attribution, in any personal or commercial project.