factor – Net Element

Set up

Set up through npm

npm set up range-slider-element
Copy

Utilization

JavaScript

Import as ES module

import ‘range-slider-element’;
Copy

Or through CDN

<script src=”https://cdn.jsdelivr.internet/npm/range-slider-element/+esm”></script>
Copy

HTML

<range-slider min=”0″ max=”100″ step=”1″ worth=”50″></range-slider>
Copy

CSS

Be certain that to load the bottom types exported through range-slider-element/fashion.css.

Or through CDN

<hyperlink rel=”stylesheet” href=”https://cdn.jsdelivr.internet/npm/range-slider-element/dist/range-slider-element.css”>
Copy

Attributes

• min The minimal permitted worth. The default is 0.
• max The utmost permitted worth. The default is 100.
• step The stepping interval. The default is 1.
• worth The worth. The default is 50 (min + (max - min) / 2).
• dir Directionality. The default is ltr. Allowed choices rtl.
• orientation The default is horizontal. Allowed choices vertical.

Styling

CSS customized properties

Uncovered CSS customized properties scoped throughout the range-slider factor.

• --track-size – The observe measurement. The default is
  0.2rem. Might be overwritten for personalization.
• --thumb-size – The thumb measurement, The default is 1.2rem.
  Might be overwritten for personalization.

DOM selectors

range-slider {}
range-slider [data-track] {}
range-slider [data-track-fill] {}
range-slider [data-thumb] {}

/* Superior customization */
range-slider [data-runnable-track] {}

Occasions

• enter – Pointer transfer, worth modified. Bubbles.
• change – Pointer up, key up, worth modified. Bubbles.