dile-range

Web Component to create a customized range input.

Installation

npm i @dile/dile-range

Usage

Import the dile-range component.

Work in progress, not documented...

import '@dile/dile-range/dile-range.js';

Use the component.

<dile-range></dile-range>

Properties

• max
• min
• value
• step
• name: The name of the range

CSS Custom Properties

You can customize it using CSS Custom Properties.

Events

• input: This element is base on a native input element. So, you can listen the native input event.

rangeField.addEventListener('input', (e) => {
  console.log('input event named ', e.target.name, ' has value: ', e.target.value);
});

• element-changed: As other input elements in dile-components, dile-range emmits element-changed event is when value on the input changes. In the event detail will provide the element name and valueproperties.

dile-range demos

Regular range

<dile-range></dile-range>

Styled range

<style>
  .styled {
    --dile-range-thumb-color: rgb(243, 133, 55);
    --dile-range-thumb-height: 3rem;
    --dile-range-line-height: 1.5rem;
    --dile-range-thumb-width: 1rem;
    --dile-range-thumb-border-radius: 0.5rem;
    --dile-range-line-color: rgb(157, 122, 151);
    --dile-range-thumb-margin-top: -12px;
  }
</style>
<dile-range class="styled"></dile-range>