Dkn-range-slider NPM

<dkn-range-slider>

Custom range-input based on web components API with zero dependencies (2.7kb gzipped). Some themes already included out-of-box in the packaged, but the slider has rich CSS styling API based on CSS custom-properties.

<dkn-range-slider></dkn-range-slider>

Check the live demo.

Installation

NPM

npm install dkn-range-slider

CDN

<script src="https://unpkg.com/dkn-range-slider@latest/dist/dkn-range-slider.min.js"></script>

Usage

When you include this script into your HTML page you can use web-components with custom tag.

<dkn-range-slider></dkn-range-slider>

API

Attributes and properties

Attribute	Reflected property	Type	Default value	Description
name	name	string	null	Proxy attribute to inputtype=range. This name is passed to form data.
value	value	number	50	Proxy attribute to inputtype=range value.
min	min	number	0	Proxy attribute to inputtype=range minimum.
max	max	number	0	Proxy attribute to inputtype=range maximum.
step	step	number	1	Proxy attribute to inputtype=range step.
disabled	disabled	boolean	false	Proxy attribute to inputtype=range disabled. If enabled the value of range selector won't passed to form-data.
label-value	labelValue	boolean	false	Enables label related with thumb, usually above thumb.
label-prefix	labelPrefix	string	""	Adds unit prefix for value's labels. Eg. $100, ¥100,
label-suffix	labelSuffix	string	""	Adds unit suffix for value's labels. Eg. 100M, 10cm.
label-limit-min	labelLimitMin	string	""	Labels for minimum label (usually on the left side).
label-limit-max	labelLimitMax	string	""	Labels for minimum label (usually on the right side).
label-access	labelAccess	string	""	Labels for minimum label (usually on the right side).
ticks	ticks	boolean	false	Enables ticks.
ticks-step	ticksStep	number	1	Override step attribute only for ticks.

Styling

The styles are placed in CSS custom properties. If your requirements meets only default style you can do not include in your project any styles. By default there is fallback in web-components itself which has 'default' theme. Another option you can choose any theme provided with this project.

<link rel="stylesheet" href="minimal.css">

Custom styling

Custom styling is done by CSS custom properties. You can copy the default.css from src/ directory and set your own styles.

State of legacy Edge (<=79) and Internet Explorer

No support. Old IE11 and Edge don't support web-components and Shadow DOM natively. If you have proper skills and knowledge you can try to use polyfills.