svelte-range-slider-pips - npm Package Compare versions

Comparing version 2.2.2 to 2.2.3

package.json

 {
   "name": "svelte-range-slider-pips",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "svelte": "src/index.js",
@@ -5,0 +5,0 @@ "module": "dist/svelte-range-slider-pips.mjs",

README.md

@@ -0,23 +1,41 @@
+<div align="center">
 
-# Range Slider (with pips)
+<img src="test/public/svelte-range-slider-logo.svg" 
+  alt="Svelte Range Slider Logo" width="20%">
+</div>
 
-![Svelte Range Slider -- focussed, including some pips](test/public/slider.png)
+<h1 align="center">
+  Svelte Range Slider (with pips)
 
-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**.
+  <p>
+    <a href="https://github.com/simeydotme/svelte-range-slider-pips/releases">
+      <img src="https://img.shields.io/github/package-json/v/simeydotme/svelte-range-slider-pips/main?label=&color=%234A40D4&logo=github" alt="Code Version">
+    </a>
+    <a href="https://www.npmjs.com/package/svelte-range-slider-pips">
+      <img src="https://img.shields.io/npm/v/svelte-range-slider-pips?color=%234A40D4&logo=npm&label=" alt="NPM version">
+      <img src="https://img.shields.io/npm/dm/svelte-range-slider-pips?label=&color=%234A40D4" alt="NPM Downloads / Month">
+    </a>
+  </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**.
 
-📔 | Docs | [Full Documentation & Examples](https://simeydotme.github.io/svelte-range-slider-pips/)
-:--: | -----: | :------
-📦 | **NPM** |[Node Module details](https://www.npmjs.com/package/svelte-range-slider-pips)
-📝 | **REPL** |[Svelte component demo](https://svelte.dev/repl/030797781fd64ad88302d1343f5b2c43?version=3)
-❤ | **Codepen** |[Plain JS component demo](https://codepen.io/simeydotme/pen/KKNJdbK)
+![Svelte Range Slider; focussed with pips and labels prop set](test/public/svelte-range-slider-screenshot.png)
 
+
+
+| 📔🔍 | Docs | [Full Documentation & Examples](https://simeydotme.github.io/svelte-range-slider-pips/) |
+| :--: | -----: | :------ |
+| 📝⚙ | **REPL** | **[Svelte component demo](https://svelte.dev/repl/030797781fd64ad88302d1343f5b2c43?version=3)** |
+| ❤✒ | **Codepen** | **[Plain JS component demo](https://codepen.io/simeydotme/pen/KKNJdbK)** |
+
 ---
 
-## features
+<br>
 
-![Features of the range slider plugin (written below)](test/public/range-slider.png)
+## Features
 
+![Features of the range slider plugin (written below)](test/public/svelte-range-slider-features.png)
+
 - ✨ fully customisable, stylable & accessible
@@ -33,3 +51,3 @@ - 👍🏽 multi-thumb
 
-## install
+## Install
 
@@ -43,5 +61,5 @@ Open your project and use the command line to install the package;
 
-## usage
+## Usage
 
-### in a svelte project
+### In a svelte project
 
@@ -58,3 +76,3 @@ Assuming you have a Svelte app up and running;
 
-### as a regular JS file
+### As a regular JS file
 
@@ -78,3 +96,3 @@ If you're not building a svelte-app, you can use the [`/dist/`
 
-### as a JS module
+### As a JS module
 
@@ -95,6 +113,8 @@ If you're building a bleeding-edge JS application (maybe Vue or React), you might
 
-## props (options)
+<br>
 
-### slider props
+## Props (options)
 
+### Slider props
+
 prop | type | default | description
@@ -128,4 +148,8 @@ -----|------|---------|-------------
 
-### slider events (dispatched)
+**[📔🔍 | Documentation for Options](https://simeydotme.github.io/svelte-range-slider-pips/en/options/)**
+<br>
+<br>
 
+### Slider events (dispatched)
+
 event | example | `event.detail` | description
@@ -137,6 +161,9 @@ ------|------------|--------|-------------
 
-**[📔📘📖 _Full Documentation & Examples_](https://simeydotme.github.io/svelte-range-slider-pips/)**
+**[📔🔍 | Documentation for Events](https://simeydotme.github.io/svelte-range-slider-pips/en/events/)**
 
-## styling
+<br>
+<br>
 
+## Styling
+
 **Styling should mostly be done with CSS.**  
@@ -153,4 +180,9 @@ There's a [bunch of css variables for controlling the colors](https://simeydotme.github.io/svelte-range-slider-pips/#styling) of the elements.
 
-## contribute
+**[📔🔍 | Documentation for Styling](https://simeydotme.github.io/svelte-range-slider-pips/en/styling/)**
 
+<br>
+<br>
+
+## Contribute
+
 I am very happy to accept;
@@ -166,9 +198,8 @@
 
-## support / donate  
+## Support / Donate  
 I'd be super excited if you find this project useful and wish to donate a small amount for my efforts!
 
-|  |  |         |
+| <img src="https://user-images.githubusercontent.com/2817396/149629283-6002944f-9253-4e35-917d-89b476deae4e.png" width=20> | [![£1 One Pound Donation](https://user-images.githubusercontent.com/2817396/149629980-08b9a952-bd6a-4c23-be78-05e3fd534352.png)](https://www.paypal.com/paypalme/simey/1) | [£1 GBP donation](https://www.paypal.com/paypalme/simey/1) |
 |--|--:|---------|
-| <img src="https://user-images.githubusercontent.com/2817396/149629283-6002944f-9253-4e35-917d-89b476deae4e.png" width=20> | [![£1 One Pound Donation](https://user-images.githubusercontent.com/2817396/149629980-08b9a952-bd6a-4c23-be78-05e3fd534352.png)](https://www.paypal.com/paypalme/simey/1) | [£1 GBP donation](https://www.paypal.com/paypalme/simey/1) |
 | <img src="https://user-images.githubusercontent.com/2817396/149629283-6002944f-9253-4e35-917d-89b476deae4e.png" width=20> | [![£5 Five Pounds Donation](https://user-images.githubusercontent.com/2817396/149629994-3a99770c-d333-46e7-9818-ab6b18ad0202.png)](https://www.paypal.com/paypalme/simey/5) | [£5 GBP donation](https://www.paypal.com/paypalme/simey/5) |
 | <img src="https://user-images.githubusercontent.com/2817396/149629283-6002944f-9253-4e35-917d-89b476deae4e.png" width=20> | [![£10 Ten Pounds Donation](https://user-images.githubusercontent.com/2817396/149630000-95aa4234-ff67-4e7c-a7f4-ffd52f25e6d8.png)](https://www.paypal.com/paypalme/simey/10) | [£10 GBP donation](https://www.paypal.com/paypalme/simey/10) |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

250591

increased by0.91%

Lines of code

5318

increased by0.38%

Number of lines in readme file

197

increased by18.67%

No dependency changes