forked fromsimeydotme/svelte-range-slider-pips
- Notifications
You must be signed in to change notification settings - Fork0
Multi-Thumb, Accessible, Beautiful Range Slider with Pips
License
NotificationsYou must be signed in to change notification settings
xuanlutw/svelte-range-slider-pips
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A reactive, accessible, multi-thumb, range slider with the ability to display "pips" or "notches" along the range. Importable as a svelte-component, or used directly in any javascript application.
| 📔 | External | Full Documentation & Examples |
|---|---|---|
| 💲 | REPL | Svelte component demo |
| ❤ | Codepen | Plain JS component demo |
- ✨ fully customisable, stylable & accessible
- 👍🏽 multi-thumb
- 🎚 range (min/max)
- 🏷 floating labels
- 📏 ruler notches
- 🏷 labels for notches
- 🧮 step function
- 🖍 formatter
- 🎭 animated
Open your project and use the command line to install the package;
yarn add svelte-range-slider-pips --dev# ornpm install svelte-range-slider-pips --save-dev# if you prefer npm
If you're not building a svelte-app, you can use the/dist/version of the script/dist/svelte-range-slider-pips.js and include iteither with a regular<script> tag. This should even work with jQuery.
<scriptsrc="./js/vendor/svelte-range-slider-pips.js"/><divid="my-slider"></div><script>varmySlider=newRangeSliderPips({target:document.getElementById("my-slider"),props:{/* props as js object */}});</script>
Assuming you have a Svelte app up and running;
<script>importRangeSliderfrom"svelte-range-slider-pips";</script><RangeSlider/>
If you're building a bleeding-edge JS application (not svelte), you mightwant to use js imports (import)
importRangeSliderfrom"./node_modules/svelte-range-slider-pips/dist/svelte-range-slider-pips.mjs";varmySlider=newRangeSlider({target:node,// js reference to a DOM elementprops:{/* props as js object */}});
| prop | type | default | description |
|---|---|---|---|
| values | Array | [50] | Array of values to apply on the slider. Multiple values creates multiple handles. (note: A slider withrange property set can only have two values max) |
| min | Number | 0 | Minimum value for the slider |
| max | Number | 100 | Maximum value for the slider |
| step | Number | 1 | Everynth value to allow handle to stop at |
| range | Boolean/String | false | Whether to style as a range picker. Userange='min' orrange='max' for min/max variants |
| pushy | Boolean | false | Ifrange istrue, then this boolean decides if one handle will push the other along |
| float | Boolean | false | Set true to add a floating label above focussed handles |
| vertical | Boolean | false | Make the slider render vertically |
| pips | Boolean | false | Whether to show pips/notches on the slider |
| pipstep | Number | 1/10/20 | Everynth step to show a pip for. This has multiple defaults depending onvalues property |
| first | Boolean/String | false | Whether to show a pip or label for the first value on slider. Usefirst='label' to show a label value |
| last | Boolean/String | false | Whether to show a pip or label for the last value on slider. Uselast='label' to show a label value |
| rest | Boolean/String | false | Whether to show a pip or label for all other values. Userest='label' to show a label value |
| all | Boolean/String | false | Whether to show a pip or label for all values. Same as combiningfirst,last andrest. Useall='label' to show a label value |
| prefix | String | "" | A string to prefix to all displayed values |
| suffix | String | "" | A string to suffix to all displayed values |
| disabled | Boolean | false | Determine if the slider is disabled, or enabled(only disables interactions, and events) |
| formatter | Function | (v) => v | A function to re-format values before they are displayed |
| handleFormatter | Function | formatter | A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to theformatter property |
| springValues | Object | { stiffness: 0.15, damping: 0.4 } | Svelte spring physics object to change the behaviour of the handle when moving |
| event | example | event.detail | description |
|---|---|---|---|
| start | on:start={(e) => { ... }} | { activeHandle: Integer, value: Float, values: Array } | Event fired when the user begins interaction with the slider |
| change | on:change={(e) => { ... }} | { activeHandle: Integer, startValue: Float, previousValue: Float, value: Float, values: Array } | Event fired when the user changes the value; returns the previous value, also |
| stop | on:stop={(e) => { ... }} | { activeHandle: Integer, startValue: Float, value: Float, values: Array } | Event fired when the user stops interacting with slider; returns the beginning value, also |
📔📘📖Full Documentation & Examples
I am very happy to accept;
- 🌟 suggestions/requests for new features or changes
- 🛠 pull-requests for bug fixes, or issue resolution
- 🧪 help with creating a proper test-suite
About
Multi-Thumb, Accessible, Beautiful Range Slider with Pips
Resources
License
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Languages
- Svelte89.3%
- JavaScript7.1%
- CSS2.5%
- HTML1.1%