{"repo":"simeydotme/svelte-range-slider-pips","free":true,"listed":false,"github":"https://github.com/simeydotme/svelte-range-slider-pips","clone":"git clone https://github.com/simeydotme/svelte-range-slider-pips.git","description":"Multi-Thumb, Accessible, Beautiful Range Slider with Pips","language":"TypeScript","stars":529,"topics":["slider","range","range-slider","svelte","sveltejs","react","vue","pips","notches","steps"],"license":"MPL-2.0","category":"ui-components","readme_excerpt":"Svelte Range Slider v4 A reactive, accessible, multi-thumb, range slider with the ability to display \"pips\" or \"notches\" along the range. Importable as a svelte-component , or able to be used directly in any javascript application / framework . 📔🔍 Docs Full Documentation & Examples :--: ----------: :------------------------------------------------------------------------------------------ 📝⚙ REPL Svelte component demo ❤✒ Codepen Plain JS component demo Features - ✨ fully customisable - ♿ accessible - 👍🏽 multi-thumb - 🎚 ranges - 🏷 floating labels - 📏 ruler values (pips) - 🏷 labels for values - 🧮 step function - 🖍 formatter - 🎭 animated - 🖋 css variables Install Open your project and use the command line to install the package; Usage Upgrading from v3 - v4 Note: Please read the upgrade guide for details, as there's some changes which might break your styling/ui. In a svelte 4 project Assuming you have a Svelte app up and running; see test folder for examples of usage with Svelte 4 or Svelte 5 --- In a svelte 5 project Svelte 5 works almost exactly the same as Svelte 4. ⚠ Note: Runes Mode -- specifically $state() -- has some issues when binding with an element. My suggestion would be to use legacy mode if you can (not runes), or read this issue for a workaround. --- In a svelte 3 project ⚠ Version 3 of Range Slider Pips is not compatible with Svelte 3. see below As a regular JS file If you're not building a svelte-app, you can use the /dist/ version of the script /d","default_branch":null,"files":null,"tree":[],"storefront":"/r/simeydotme","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/simeydotme/svelte-range-slider-pips/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}