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

Comparing version 1.8.1 to 2.0.0

package.json

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

README.md

@@ -12,6 +12,6 @@
 
-📔 | External | [_Full Documentation & Examples_](https://simeydotme.github.io/svelte-range-slider-pips/)
+📔 | External | [Full Documentation & Examples](https://simeydotme.github.io/svelte-range-slider-pips/)
 :--: | -----: | :------
-💲 | **REPL** |[_Svelte component demo_](https://svelte.dev/repl/030797781fd64ad88302d1343f5b2c43?version=3.32.1)
-❤ | **Codepen** |[_Plain JS component demo_](https://codepen.io/simeydotme/pen/KKNJdbK)
+📝 | **REPL** |[Svelte component demo](https://svelte.dev/repl/030797781fd64ad88302d1343f5b2c43?version=3.32.1)
+❤ | **Codepen** |[Plain JS component demo](https://codepen.io/simeydotme/pen/KKNJdbK)
 
@@ -45,2 +45,14 @@ ---
 
+### in a svelte project
+
+Assuming you have a Svelte app up and running;
+
+```html
+<script>
+  import RangeSlider from "svelte-range-slider-pips";
+</script>
+
+<RangeSlider values={[50]} pips />
+```
+
 ### as a regular JS file
@@ -50,3 +62,3 @@
 version of the script `/dist/svelte-range-slider-pips.js`](dist/svelte-range-slider-pips.js) and include it
-either with a regular `<script>` tag. This should even work with jQuery.
+with a regular `<script>` tag. This should even work with jQuery.
 
@@ -60,4 +72,4 @@ ```html
   var mySlider = new RangeSliderPips({
-    target: document.getElementById("my-slider"),
-    props: { /* props as js object */ }
+    target: document.querySelector(".mySlider"),
+    props: { values: [50], pips: true }
   });
@@ -67,17 +79,5 @@ </script>
 
-### in a svelte project
-
-Assuming you have a Svelte app up and running;
-
-```html
-<script>
-  import RangeSlider from "svelte-range-slider-pips";
-</script>
-
-<RangeSlider />
-```
-
 ### as a JS module
 
-If you're building a bleeding-edge JS application (not svelte), you might
+If you're building a bleeding-edge JS application (maybe Vue or React), you might
 want to use js imports (`import`)
@@ -90,3 +90,3 @@
   target: node, // js reference to a DOM element
-  props: { /* props as js object */ }
+  props: { values: [50], pips: true }
 });
@@ -110,3 +110,3 @@ ```
 **float** | `Boolean` | `false` | Set true to add a floating label above focussed handles
-**vertical** | `Boolean` | `false` | Make the slider render vertically
+**vertical** | `Boolean` | `false` | Make the slider render vertically (lower value on bottom)
 **pips** | `Boolean` | `false` | Whether to show pips/notches on the slider
@@ -120,5 +120,8 @@ **pipstep** | `Number` | `1`/`10`/`20` | Every `nth` step to show a pip for. This has multiple defaults depending on `values` property
 **suffix** | `String` | `""` | A string to suffix to all displayed values
+**reversed** | `Boolean` | `false` | Reverse the orientation of min/max
+**hoverable** | `Boolean` | `true` | Whether hover styles are enabled for both handles and pips/values
 **disabled** | `Boolean` | `false` | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_
-**formatter** | `Function` | `(v,i) => v` | A function to re-format values before they are displayed (`v = value, i = pip index`)
-**handleFormatter** | `Function` | `formatter` | A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the `formatter` property (`v = value, i = handle index`)
+**id** | `String` | `""` | Give the slider a unique ID for use in styling
+**formatter** | `Function` | `(v,i,p) => v` | A function to re-format values before they are displayed (`v = value, i = pip index, p = percent`)
+**handleFormatter** | `Function` | `formatter` | A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the `formatter` property (`v = value, i = handle index, p = percent`)
 **springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving
@@ -136,2 +139,15 @@
 
+## styling
+
+**Styling should mostly be done with CSS.**  
+There's a [bunch of css variables for controlling the colors](https://simeydotme.github.io/svelte-range-slider-pips/#styling) of the elements. 
+And the slider is fluid horizontally, with the size of things controlled by font-size. So you may change he `font-size` on the `.rangeSlider` base
+element to change the scale of everything.
+
+If you require more fine control of the widths, heights, etc, then you may override the default css. This can be easier by using the `id` prop
+to give your slider a unique id.
+
+Values of labels can be styled with CSS, and the format can be modified with the `formatter()` function prop. And animation of the handles is
+controlled by the `springValues` object prop.
+
 ## contribute
@@ -138,0 +154,0 @@

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

235877

increased by8.54%

Lines of code

5052

increased by5.73%

Number of lines in readme file

153

increased by11.68%

No dependency changes