New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
svelte-range-slider-pips
Advanced tools
svelte-range-slider-pips - npm Package Compare versions
Comparing version 3.0.0-beta.5 to 3.0.0
| { | ||
| "name": "svelte-range-slider-pips", | ||
| "version": "3.0.0-beta.5", | ||
| "version": "3.0.0", | ||
| "description": "Multi-Thumb, Accessible, Beautiful Range Slider with Pips", | ||
@@ -5,0 +5,0 @@ "repository": { |
| <div align="center"> | ||
| <img src="public/svelte-range-slider-logo.svg" | ||
| alt="Svelte Range Slider Logo" width="20%"> | ||
| alt="Svelte Range Slider Logo" width="20%"> | ||
| </div> | ||
| <h1 align="center"> | ||
| Svelte Range Slider v3 | ||
| </h1> | ||
| <h1 align="center"> | ||
| Svelte Range Slider (with pips) | ||
| <p> | ||
@@ -20,6 +19,5 @@ <a href="https://github.com/simeydotme/svelte-range-slider-pips/releases"> | ||
| </p> | ||
| </h1> | ||
| 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**. | ||
| Importable as a **_svelte-component_**, or able to be **used directly in any javascript application / framework**. | ||
@@ -33,2 +31,8 @@  | ||
| <br> | ||
| </div> | ||
| _🆕 = New/Changed in version 3.0.0_ | ||
| --- | ||
@@ -42,11 +46,13 @@ | ||
| - ✨ fully customisable, stylable & accessible | ||
| - ✨ fully customisable | ||
| - ♿ accessible | ||
| - 👍🏽 multi-thumb | ||
| - 🎚 range (min/max) | ||
| - 🎚 ranges | ||
| - 🏷 floating labels | ||
| - 📏 ruler notches | ||
| - 🏷 labels for notches | ||
| - 📏 ruler values (pips) | ||
| - 🏷 labels for values | ||
| - 🧮 step function | ||
| - 🖍 formatter | ||
| - 🎭 animated | ||
| - 🖋 css variables | ||
@@ -68,10 +74,14 @@ ## Install | ||
| ```html | ||
| ```svelte | ||
| <script> | ||
| import RangeSlider from 'svelte-range-slider-pips'; | ||
| import { RangeSlider } from 'svelte-range-slider-pips'; | ||
| </script> | ||
| <RangeSlider values="{[50]}" pips /> | ||
| <RangeSlider values={[50]} pips /> | ||
| ``` | ||
| - 🆕 _see [test folder](./tests/) for examples of [usage with Svelte 4](./tests/svelte4/src/App.svelte) or [Svelte 5](./tests/svelte5/src/routes/+page.svelte)_ | ||
| --- | ||
| ### As a regular JS file | ||
@@ -81,13 +91,21 @@ | ||
| version of the script `/dist/svelte-range-slider-pips.js`](dist/svelte-range-slider-pips.js) and include it | ||
| with a regular `<script>` tag. This should even work with jQuery. | ||
| with a regular `<script>` tag. | ||
| This should even work with jQuery. | ||
| ```html | ||
| <!-- in the <head> of your html --> | ||
| <link rel="stylesheet" href="./js/vendor/svelte-range-slider-pips.css" /> | ||
| <script src="./js/vendor/svelte-range-slider-pips.js" /> | ||
| <!-- in the <body> of your html --> | ||
| <div id="my-slider"></div> | ||
| <script> | ||
| var mySlider = new RangeSliderPips({ | ||
| target: document.querySelector('#my-slider'), | ||
| props: { values: [50], pips: true } | ||
| // this script will be run when the DOM is ready | ||
| // and the slider is initialised | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| var mySlider = new RangeSliderPips({ | ||
| target: document.querySelector('#my-slider'), | ||
| props: { values: [50], pips: true } | ||
| }); | ||
| }); | ||
@@ -97,2 +115,11 @@ </script> | ||
| <ul> | ||
| <li><img height="16" src="./public/icons/js-svgrepo-com.png" alt="JS Icon"> <em>see examples of <a href="./tests/vanilla/">usage with Vanilla JS </a></em> | ||
| </li> | ||
| <li><img height="16" src="./public/icons/jquery-svgrepo-com.png" alt="jQuery Icon"> <em>or <a href="./tests/jquery/index.jquery.js">running with jQuery </a></em> | ||
| </li> | ||
| </ul> | ||
| --- | ||
| ### As a JS module | ||
@@ -112,2 +139,11 @@ | ||
| <ul> | ||
| <li><img height="16" src="./public/icons/js-svgrepo-com.png" alt="JS Icon"> <em>see examples of <a href="./tests/vanilla/esm.html">usage with ES modules </a></em> | ||
| </li> | ||
| <li><img height="16" src="./public/icons/vuejs-svgrepo-com.png" alt="Vue Icon"> <em>or <a href="./tests/vuejs/src/App.vue">usage with VueJS </a></em> | ||
| </li> | ||
| <li><img height="16" src="./public/icons/react-svgrepo-com.png" alt="React Icon"> <em>or <a href="./tests/reactjs/src/App.js">importing with ReactJS </a></em> | ||
| </li> | ||
| </ul> | ||
| --- | ||
@@ -114,0 +150,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.47%
293609
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by18.27%
233
No dependency changes