Last updated: 2021

A lightweight, simple-to-use slider allowing users to make selections from a range of values.

Demo

Since this is a web component, you can just use directly in your HTML like this To use it with other framework e.g Angular, React, Vue etc. see Framework Integrations from Stencil site.

Feature custom color of your choice is still under development

There are three strategies to use web components built with Stencil.

• Put a script tag similar to this <script type='module' src='https://unpkg.com/uiw-slider@<latest-version>/dist/uiw-slider.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

• Run npm install uiw-slider --save
• Put a script tag similar to this <script type='module' src='node_modules/uiw-slider/dist/uiw-slider.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

• Run npm install uiw-slider --save
• Add an import to the npm packages import uiw-slider;
• Then you can use the element anywhere in your template, JSX, html etc

If you have found a bug or have another issue with the library — please create an issue.

If you have a question regarding the library or it's integration with your project — consider asking a question at StackOverflow.

Have any ideas or propositions? Feel free to develop it further. See Developer guide below.

Cheers!

You're welcome to make this component even more flexible, scalable and robust! Fork, clone, create a feature branch, implement your feature, cover it with tests, commit, create a PR.

npm install
npm start // run development server serving src/index.html

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

The hint is created based on the min and max upon creation. Hence, the example on the top of this page will always show 0-100. To test other scenarios, you can, for instance, add the code above to web-components/src/index.html.

The input field has a width that is set upon load based on the min and max. Since the min and max are supposed to be immutable, the example above will have a input field width for min = 0 and max = 100.

By default, the stepSize is set to 1.

By providing a numerical input that is higher than the maximum value or lower than the minimum value, an error message would appear below the slider.

By default, the stepSize is set to 1.

By providing a numerical input that is higher than the maximum value or lower than the minimum value, an error message would appear below the slider. The component allows integers only and does not have any dark mode.

Emptying the fields would set the attributes to empty strings rather than default values. To test the default values, you can, for instance, add the code above to web-components/src/index.html.

If you like this library consider to add star on GitHub repository.

Thank you!