Skip to content

Commit 4c3fb10

Browse files
committed
document prop all in readme
1 parent ce368f7 commit 4c3fb10

File tree

1 file changed

+9
-6
lines changed

1 file changed

+9
-6
lines changed

README.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11

22
# Range Slider (with pips)
3+
34
## [`svelte-range-slider-pips`](https://www.npmjs.com/package/svelte-range-slider-pips) @ **npm**
45

56
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.
67

78
![Svelte Range Slider -- focussed, including some pips](test/public/slider.png)
89

9-
1010
---
1111

1212
📔 | External | [_Full Documentation & Examples_](https://simeydotme.github.io/svelte-range-slider-pips/)
@@ -18,7 +18,6 @@ A reactive, accessible, multi-thumb, range slider with the ability to display "p
1818

1919
## features
2020

21-
2221
![Features of the range slider plugin (written below)](test/public/range-slider.png)
2322

2423
- ✨ fully customisable, stylable & accessible
@@ -34,6 +33,7 @@ A reactive, accessible, multi-thumb, range slider with the ability to display "p
3433
## install
3534

3635
Open your project and use the command line to install the package;
36+
3737
```bash
3838
yarn add svelte-range-slider-pips --dev # or
3939
npm install svelte-range-slider-pips --save-dev # if you prefer npm
@@ -74,7 +74,7 @@ Assuming you have a Svelte app up and running;
7474

7575
### as a JS module
7676

77-
If you're building a bleeding-edge JS application (not svelte), you might
77+
If you're building a bleeding-edge JS application (not svelte), you might
7878
want to use js imports (`import`)
7979

8080
```js
@@ -89,7 +89,9 @@ var mySlider = new RangeSlider({
8989
---
9090

9191
## props (options)
92+
9293
### slider props
94+
9395
prop | type | default | description
9496
-----|------|---------|-------------
9597
**values** | `Array` | `[50]` | Array of values to apply on the slider. Multiple values creates multiple handles. (_**note:** A slider with `range` property set can only have two values max_)
@@ -104,7 +106,8 @@ prop | type | default | description
104106
**pipstep** | `Number` | `1`/`10`/`20` | Every `nth` step to show a pip for. This has multiple defaults depending on `values` property
105107
**first** | `Boolean`/`String` | `false` | Whether to show a pip or label for the first value on slider. Use `first='label'` to show a label value
106108
**last** | `Boolean`/`String` | `false` | Whether to show a pip or label for the last value on slider. Use `last='label'` to show a label value
107-
**rest** | `Boolean`/`String` | `false` | Whether to show a pip or label for the all other values. Use `rest='label'` to show a label value
109+
**rest** | `Boolean`/`String` | `false` | Whether to show a pip or label for all other values. Use `rest='label'` to show a label value
110+
**all** | `Boolean`/`String` | `false` | Whether to show a pip or label for all values. Same as combining `first`, `last` and `rest`. Use `all='label'` to show a label value
108111
**prefix** | `String` | `""` | A string to prefix to all displayed values
109112
**suffix** | `String` | `""` | A string to suffix to all displayed values
110113
**disabled** | `Boolean` | `false` | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_
@@ -113,6 +116,7 @@ prop | type | default | description
113116
**springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving
114117

115118
### slider events (dispatched)
119+
116120
event | example | `event.detail` | description
117121
------|------------|--------|-------------
118122
**start** | `on:start={(e) => { ... }}` | `{ activeHandle: Integer, value: Float, values: Array }` | Event fired when the user begins interaction with the slider
@@ -121,13 +125,12 @@ event | example | `event.detail` | description
121125

122126
**[📔📘📖 _Full Documentation & Examples_](https://simeydotme.github.io/svelte-range-slider-pips/)**
123127

124-
125128
## contribute
126129

127130
I am very happy to accept;
131+
128132
- 🌟 suggestions/requests for new features or changes
129133
- 🛠 pull-requests for bug fixes, or issue resolution
130134
- 🧪 help with creating a proper test-suite
131135

132136
[Read the CONTRIBUTING.md](./CONTRIBUTING.md)
133-

0 commit comments

Comments
 (0)