add the feature to click labels for selecting that value

- allow clicking on labels
- document the "hoverable" property
- document the "id" property
- add some improvements to readme

resolves #38

Author: simeydotme

README.md

@@ -9,10 +9,10 @@ A reactive, accessible, multi-thumb, range slider with the ability to display "p
 
 ---
 
-📔 | 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)
 
 ---
 
@@ -41,11 +41,23 @@ npm install svelte-range-slider-pips --save-dev  # if you prefer npm
 
 ## usage
 
+### 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
 
 If you're not building a svelte-app, you can use the [`/dist/`
 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.
 
 ```html
 <script src="./js/vendor/svelte-range-slider-pips.js" />
@@ -54,35 +66,23 @@ either with a regular `<script>` tag. This should even work with jQuery.
 
 <script>
   var mySlider = new RangeSliderPips({
-    target: document.getElementById("my-slider"),
-    props: { /* props as js object */ }
+    target: document.querySelector(".mySlider"),
+    props: { values: [50], pips: true }
   });
 </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`)
 
 ```js
 import RangeSlider from "./node_modules/svelte-range-slider-pips/dist/svelte-range-slider-pips.mjs";
 
 var mySlider = new RangeSlider({
   target: node, // js reference to a DOM element
-  props: { /* props as js object */ }
+  props: { values: [50], pips: true }
 });
 ```
 
@@ -110,7 +110,9 @@ prop | type | default | description
 **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
 **prefix** | `String` | `""` | A string to prefix to all displayed values
 **suffix** | `String` | `""` | A string to suffix to all displayed values
+**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)_
+**id** | `String` | `""` | Give the slider a unique ID for use in styling
 **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`)
 **springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving
@@ -125,6 +127,19 @@ event | example | `event.detail` | description
 
 **[📔📘📖 _Full Documentation & Examples_](https://simeydotme.github.io/svelte-range-slider-pips/)**
 
+## 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
 
 I am very happy to accept;

src/RangePips.svelte

@@ -7,6 +7,8 @@
   export let step = 1;
   export let values = [(max + min) / 2];
   export let vertical = false;
+  export let hoverable = true;
+  export let disabled = false;
 
   // range pips / values props
   export let pipstep = undefined;
@@ -22,7 +24,10 @@
 
   // stylistic props
   export let focus = undefined;
+
+  // methods
   export let percentOf = undefined;
+  export let moveHandle = undefined;
 
   $: pipStep = pipstep || ((max - min) / step >= ( vertical ? 50 : 100 ) ? (max - min) / ( vertical ? 10 : 20 ) : 1);
 
@@ -45,6 +50,10 @@
       return values[0] < val && values[1] > val;
     }
   };
+
+  function labelClick(val) {
+    moveHandle( undefined, val );
+  }
 </script>
 
 <style>
@@ -53,6 +62,8 @@
     --pip-text: var(--range-pip-text, var(--pip));
     --pip-active: var(--range-pip-active, darkslategrey);
     --pip-active-text: var(--range-pip-active-text, var(--pip-active));
+    --pip-hover: var(--range-pip-hover, darkslategrey);
+    --pip-hover-text: var(--range-pip-hover-text, var(--pip-hover));
     --pip-in-range: var(--range-pip-in-range, var(--pip-active));
     --pip-in-range-text: var(--range-pip-in-range-text, var(--pip-active-text));
   }
@@ -84,13 +95,6 @@
     top: 0;
     left: 0.25em;
   }
-  :global(.rangePips .pip.selected) {
-    height: 0.75em;
-  }
-  :global(.rangePips.vertical .pip.selected) {
-    height: 1px;
-    width: 0.75em;
-  }
   :global(.rangePips .pipVal) {
     position: absolute;
     top: 0.4em;
@@ -102,19 +106,11 @@
     left: 0.4em;
     transform: translate(25%, -50%);
   }
-  :global(.rangePips .pip.selected .pipVal) {
-    font-weight: bold;
-    top: 0.75em;
-  }
-  :global(.rangePips.vertical .pip.selected .pipVal) {
-    top: 0;
-    left: 0.75em;
-  }
   :global(.rangePips .pip) {
     transition: all 0.15s ease;
   }
   :global(.rangePips .pipVal) {
-    transition: all 0.15s ease;
+    transition: all 0.15s ease, font-weight 0s linear;
   }
   :global(.rangePips .pip) {
     color: lightslategray;
@@ -128,36 +124,77 @@
     background-color: darkslategrey;
     background-color: var(--pip-active);
   }
+  :global(.rangePips.hoverable:not(.disabled) .pip:hover) {
+    color: darkslategrey;
+    color: var(--pip-hover-text);
+    background-color: darkslategrey;
+    background-color: var(--pip-hover);
+  }
   :global(.rangePips .pip.in-range) {
     color: darkslategrey;
     color: var(--pip-in-range-text);
     background-color: darkslategrey;
     background-color: var(--pip-in-range);
   }
+  :global(.rangePips .pip.selected) {
+    height: 0.75em;
+  }
+  :global(.rangePips.vertical .pip.selected) {
+    height: 1px;
+    width: 0.75em;
+  }
+  :global(.rangePips .pip.selected .pipVal) {
+    font-weight: bold;
+    top: 0.75em;
+  }
+  :global(.rangePips.vertical .pip.selected .pipVal) {
+    top: 0;
+    left: 0.75em;
+  }
+  :global(.rangePips.hoverable:not(.disabled) .pip:not(.selected):hover) {
+    transition: none;
+  }
+  :global(.rangePips.hoverable:not(.disabled) .pip:not(.selected):hover .pipVal) {
+    transition: none;
+    font-weight: bold;
+  }
 </style>
 
-<div class="rangePips" class:focus class:vertical>
+<div 
+  class="rangePips" 
+  class:disabled
+  class:hoverable 
+  class:vertical 
+  class:focus 
+>
   {#if ( all && first !== false ) || first }
     <span
       class="pip first"
       class:selected={isSelected(min)}
       class:in-range={inRange(min)}
-      style="{vertical ? 'top' : 'left'}: 0%;">
+      style="{vertical ? 'top' : 'left'}: 0%;"
+      on:click={labelClick(min)}
+      on:touchend|preventDefault={labelClick(min)}
+    >
       {#if all === 'label' || first === 'label'}
         <span class="pipVal">
           {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(min,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>
   {/if}
+
   {#if ( all && rest !== false ) || rest}
     {#each Array(pipCount + 1) as _, i}
       {#if pipVal(i) !== min && pipVal(i) !== max}
         <span
           class="pip"
           class:selected={isSelected(pipVal(i))}
           class:in-range={inRange(pipVal(i))}
-          style="{vertical ? 'top' : 'left'}: {percentOf(pipVal(i))}%;">
+          style="{vertical ? 'top' : 'left'}: {percentOf(pipVal(i))}%;"
+          on:click={labelClick(pipVal(i))}
+          on:touchend|preventDefault={labelClick(pipVal(i))}
+        >
           {#if all === 'label' || rest === 'label'}
             <span class="pipVal">
               {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(pipVal(i),i)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
@@ -167,17 +204,22 @@
       {/if}
     {/each}
   {/if}
+
   {#if ( all && last !== false ) || last}
     <span
       class="pip last"
       class:selected={isSelected(max)}
       class:in-range={inRange(max)}
-      style="{vertical ? 'top' : 'left'}: 100%;">
+      style="{vertical ? 'top' : 'left'}: 100%;"
+      on:click={labelClick(max)}
+      on:touchend|preventDefault={labelClick(max)}
+    >
       {#if all === 'label' || last === 'label'}
         <span class="pipVal">
           {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(max,pipCount)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>
   {/if}
+  
 </div>