Skip to content

Commit 892ee40

Browse files
simeydotmesimeydotme
committed
update readme to new lib
1 parent 3f432ce commit 892ee40

File tree

8 files changed

+55
-18
lines changed

8 files changed

+55
-18
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ node_modules
55
/docs
66
/tests/**/build
77
/tests/**/dist
8+
/tests/**/node_modules
89
/.svelte-kit
910
/package
1011
.env

‎README.md‎

Lines changed: 54 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<div align="center">
22

33
<img src="public/svelte-range-slider-logo.svg"
4-
alt="Svelte Range Slider Logo" width="20%">
4+
alt="Svelte Range Slider Logo" width="20%">
55

6-
</div>
7-
8-
<h1 align="center">
9-
Svelte Range Slider (with pips)
6+
<h1 align="center">
7+
Svelte Range Slider (with pips)
8+
</h1>
109

1110
<p>
1211
<a href="https://github.com/simeydotme/svelte-range-slider-pips/releases">
@@ -17,10 +16,9 @@
1716
<img src="https://img.shields.io/npm/dm/svelte-range-slider-pips?label=&color=%234A40D4" alt="NPM Downloads / Month">
1817
</a>
1918
</p>
20-
</h1>
2119

2220
A reactive, accessible, multi-thumb, range slider with the ability to display "pips" or "notches" along the range.
23-
Importable as a **_svelte-component_**, or able to be **used directly in any javascript application / framework**.
21+
Importable as a **_svelte-component_**, or able to be **used directly in any javascript application / framework**.
2422

2523
![Svelte Range Slider; focussed with pips and labels prop set](public/svelte-range-slider-screenshot.png)
2624

@@ -29,6 +27,12 @@ Importable as a **_svelte-component_**, or able to be **used directly in any jav
2927
| 📝⚙ | **REPL** | **[Svelte component demo](https://svelte.dev/repl/030797781fd64ad88302d1343f5b2c43?version=3)** |
3028
| ❤✒ | **Codepen** | **[Plain JS component demo](https://codepen.io/simeydotme/pen/KKNJdbK)** |
3129

30+
<br>
31+
32+
</div>
33+
34+
_🆕 = New/Changed in version 3.0.0_
35+
3236
---
3337

3438
<br>
@@ -37,15 +41,17 @@ Importable as a **_svelte-component_**, or able to be **used directly in any jav
3741

3842
![Features of the range slider plugin (written below)](public/svelte-range-slider-features.png)
3943

40-
- ✨ fully customisable, stylable & accessible
44+
- ✨ fully customisable
45+
- ♿ accessible
4146
- 👍🏽 multi-thumb
42-
- 🎚 range (min/max)
47+
- 🎚 ranges
4348
- 🏷 floating labels
44-
- 📏 ruler notches
45-
- 🏷 labels for notches
49+
- 📏 ruler values (pips)
50+
- 🏷 labels for values
4651
- 🧮 step function
4752
- 🖍 formatter
4853
- 🎭 animated
54+
- 🖋 css variables
4955

5056
## Install
5157

@@ -62,33 +68,54 @@ npm install svelte-range-slider-pips --save-dev # if you prefer npm
6268

6369
Assuming you have a Svelte app up and running;
6470

65-
```html
71+
```svelte
6672
<script>
67-
import RangeSlider from 'svelte-range-slider-pips';
73+
import { RangeSlider } from 'svelte-range-slider-pips';
6874
</script>
6975
70-
<RangeSlider values="{[50]}" pips />
76+
<RangeSlider values={[50]} pips />
7177
```
7278

79+
- 🆕 _see [test folder](./tests/) for examples of [usage with Svelte 4](./tests/svelte4/) or [Svelte 5](./tests/svelte5/)_
80+
81+
---
82+
7383
### As a regular JS file
7484

7585
If you're not building a svelte-app, you can use the [`/dist/`
7686
version of the script `/dist/svelte-range-slider-pips.js`](dist/svelte-range-slider-pips.js) and include it
77-
with a regular `<script>` tag. This should even work with jQuery.
87+
with a regular `<script>` tag.
88+
This should even work with jQuery.
7889

7990
```html
91+
<!-- in the <head> of your html -->
92+
<link rel="stylesheet" href="./js/vendor/svelte-range-slider-pips.css" />
8093
<script src="./js/vendor/svelte-range-slider-pips.js" />
8194
95+
<!-- in the <body> of your html -->
8296
<div id="my-slider"></div>
8397
8498
<script>
85-
var mySlider = new RangeSliderPips({
86-
target: document.querySelector('#my-slider'),
87-
props: { values: [50], pips: true }
99+
// this script will be run when the DOM is ready
100+
// and the slider is initialised
101+
document.addEventListener('DOMContentLoaded', () => {
102+
var mySlider = new RangeSliderPips({
103+
target: document.querySelector('#my-slider'),
104+
props: { values: [50], pips: true }
105+
});
88106
});
89107
</script>
90108
```
91109

110+
<ul>
111+
<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>
112+
</li>
113+
<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>
114+
</li>
115+
</ul>
116+
117+
---
118+
92119
### As a JS module
93120

94121
If you're building a bleeding-edge JS application (maybe Vue or React), you might
@@ -103,6 +130,15 @@ var mySlider = new RangeSlider({
103130
});
104131
```
105132

133+
<ul>
134+
<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>
135+
</li>
136+
<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>
137+
</li>
138+
<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>
139+
</li>
140+
</ul>
141+
106142
---
107143

108144
<br>

‎public/icons/css-3-svgrepo-com.png‎

10.7 KB
Loading

‎public/icons/html-5-svgrepo-com.png‎

10.5 KB
Loading

‎public/icons/jquery-svgrepo-com.png‎

18.1 KB
Loading

‎public/icons/js-svgrepo-com.png‎

7.8 KB
Loading

‎public/icons/react-svgrepo-com.png‎

17.6 KB
Loading

‎public/icons/vuejs-svgrepo-com.png‎

8.7 KB
Loading

0 commit comments

Comments
 (0)