Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vueform/slider

Vue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).
https://github.com/vueform/slider

range range-slider range-slider-component range-slider-library slider-range tailwind tailwindcss vue vue2 vue3 vuejs

Last synced: 3 months ago
JSON representation

Vue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).

Awesome Lists containing this project

README 

        


  

    npm

  



  CircleCI



  

    

  



  

    npm bundle size (scoped version)

  



  

    Discord

  



  

    npm

  



  
Vue 3 Slider


  

  

    


    

    


  



  


  



  

    

  

  





## Sponsors








  




## About Vueform





  Vueform











Vueform is comprehensive **form development framework** for Vue.js. It supercharges and standardizes the entire form building process and takes care of everything from rendering to validation and processing. With our latest tool, the **Drag and Drop Form Builder**, you can allow your developers & non-tech workforce to build the most complex forms without coding.



Feature highlights:

- integrate Vueform **Drag and Drop Form Builder** into **any application**

- save forms in **database** as a JSON

- use your **own form elements** with **custom configuration** options

- a complete theming and templating system with **Tailwind support**

- 25+ form elements with **multi-file uploads**, date pickers and rich text editor

- element **nesting** and **repeating**

- **50+ validators** with async, dependent and custom rules

- **conditional logic** on element & form level

- breaking forms into **steps** with **form wizard**

- **translating** form content and global i18n support.





  Vueform Builder










**Learn more:**

- Builder: [https://builder.vueform.com](https://builder.vueform.com?cid=slider)

- Framework: [https://vueform.com](https://vueform.com?cid=slider)



## Other libraries



* [@vueform/multiselect](https://github.com/vueform/multiselect) - Vue 3 multiselect component with single select, multiselect and tagging options.

* [@vueform/toggle](https://github.com/vueform/toggle) - Vue 3 toggle component with labels, custom slots and styling options.



## Slider features



* Vue 2 & 3 support

* 100% coverage

* TypeScript support

* ESM support

* Fully configurable

* Single slider

* Multiple sliders

* Tooltips

* Formatting

* CSS vars support

* Accessibility support

* Tailwind & utility class support

* Based on [noUiSlider](https://github.com/leongersen/noUiSlider)



## Sections



* [Demo](#demo)

* [Installation](#installation)

  * [Using with Vue 3](#using-with-vue-3)

  * [Using with Vue 2](#using-with-vue-2)

* [Support](#support)

* [Configuration](#configuration)

  * [Basic props](#basic-props)

  * [Events](#events)

* [Styling](#styling)

  * [Styling with CSS vars](#styling-with-css-vars)

  * [Styling with Tailwind CSS](#styling-with-tailwind-css)

* [Examples](#examples)

  * [Single slider](#single-slider)

  * [Multiple slider](#multiple-slider)

  * [Tooltip formatting](#tooltip-formatting)

  * [Tooltip merging](#tooltip-merging)

* [License](#license)



## Demo 



Check out our [demo](https://jsfiddle.net/0Lp1bqyv/).



## Installation



```

npm install @vueform/slider

```



### Using with Vue 3



``` vue



  


    

  



  import Slider from '@vueform/slider'



  export default {

    components: {

      Slider,

    },

    data() {

      return {

        value: 20

      }

    }

  }



```



### Using with Vue 2



``` vue



  


    

  



  import Slider from '@vueform/slider/dist/slider.vue2.js'



  export default {

    components: {

      Slider,

    },

    data() {

      return {

        value: 20

      }

    }

  }



```



#### Using with < Vue 2.7



Switch to [`<= 2.0.10`](https://github.com/vueform/slider/tree/2.0.10) to use the Slider with Vue.js `< 2.7`.



## Support



Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](https://github.com/vueform/slider/issues).



## Configuration



### Basic props



| Name | Type | Default | Description |

| --- | --- | --- | --- |

| **id** | `string` | `slider` | The `id` attribute of slider container DOM. |

| **lazy** | `boolean` | `true` | Whether to update `v-model` only when the slider value is set and not while dragging. If disabled you must not use inline objects as props (eg. `format`, `options`, `classes`) but outsource them to a data property. |

| **disabled** | `boolean` | `false` | Whether the slider should be disabled. |

| **min** | `number` | `0` | Minimum value of the slider. |

| **max** | `number` | `100` | Maximum value of the slider. |

| **step** | `number` | `1` | The jump between intervals. If `-1` it enables fractions (eg. `1.23`). |

| **tooltips** | `boolean` | `true` | Whether tooltips should show above handlers. |

| **showTooltip** | `string` | `'always'` | When tooltips should be shown. Possible values: `always\|focus\|drag`. |

| **merge** | `number` | `-1` | The step distance between two handles when their tooltips should be merged (when `step` is `-1` then `1` is assumed). Eg: 

 `{ merge: 5, step: 10 }` 
 -> values: `0, <=50` will merge 
 -> values: `0, 60` will not merge 

 `{ merge: 5, step: -1 }` 
 -> values: `0, <=5` will merge 
 -> values: `0, 5.01` will not merge  |

| **format** | `object\|function` |  | Formats the tooltip. It can be either a function that receives a `value` param and expects a string or number as return or an object with the following properties: 
 `prefix` - eg `$` -> `$100` 
 `suffix` - eg `USD` -> `100USD` 
 `decimals` - eg `2` -> `100.00`  
 `thousand` - eg `,` - `1,000` |

| **orientation** | `string` | `'horizontal'` | The orientation of the slider. Possible values: `horizontal\|vertical` |

| **direction** | `string` | `'ltr'` | The direction of the slider. By default value increases *left-to-right* and *top-to-bottom*, which is reversed when using `rtl`. Possible values: `ltr\|rtl` |

| **tooltipPosition** | `string` | `null` | The position of the slider tooltips. Possible values: `null\|'top'\|'bottom'\|'left'\|'right'` depending on `orientation` prop. When `null` it equals to `orientation` default (`'top'` for `'horizontal'` and `'left'` for `'vertical'`). |

| **aria** | `object` | | An object containing aria attributes to be added for each handle. |

| **ariaLabelledby** | `string` | `null` | Sets the `aria-labelledby` attribute of handles. |

| **options** | `object` | `{}` | Additional [options](https://refreshless.com/nouislider/slider-options/) for noUiSlider. |

| **classes** | `object` | | An object of class names that gets merged with the default values. Default:
`{`
  `target: 'slider-target',`
  `ltr: 'slider-ltr',`
  `rtl: 'slider-rtl',`
  `horizontal: 'slider-horizontal',`
  `vertical: 'slider-vertical',`
  `textDirectionRtl: 'slider-txt-dir-rtl',`
  `textDirectionLtr: 'slider-txt-dir-ltr',`
  `base: 'slider-base',`
  `connects: 'slider-connects',`
  `connect: 'slider-connect',`
  `origin: 'slider-origin',`
  `handle: 'slider-handle',`
  `handleLower: 'slider-handle-lower',`
  `handleUpper: 'slider-handle-upper',`
  `touchArea: 'slider-touch-area',`
  `tooltip: 'slider-tooltip',`
  `tooltipTop: 'slider-tooltip-top',`
  `tooltipBottom: 'slider-tooltip-bottom',`
  `tooltipLeft: 'slider-tooltip-left',`
  `tooltipRight: 'slider-tooltip-right',`
  `active: 'slider-active',`
  `draggable: 'slider-draggable',`
  `tap: 'slider-state-tap',`
  `drag: 'slider-state-drag'`
`}` |





  Vueform




### Events



| Event | Attributes | Description |

| --- | --- | --- |

| **@change** | `value` | Emitted when dragging the slider is finished or it's value changed by clicking, keyboard or programmatical set. |

| **@update** | `value` | Emitted in the same scenarios as in `@change`, but also when the slider is being dragged if `lazy` option is disabled. |

| **@set** | `value` | Emitted in the same scenarios as in `@change`, but also when the slider's `.set()` method is called. |

| **@slide** | `value` | Emitted while the slider moves. |

| **@drag** | `value` | Emitted the slider connect moves while dragging. |

| **@start** | `value` | Emitted when the handle is activated and dragging started. |

| **@end** | `value` | Emitted when the dragging ended. |



## Styling



### Styling with CSS vars



The following CSS variables can be used to customize slider when using `default.css`:



``` css

--slider-bg: #D1D5DB;

--slider-connect-bg: #10B981;

--slider-connect-bg-disabled: #9CA3AF;

--slider-height: 6px;

--slider-vertical-height: 300px;

--slider-radius: 9999px;



--slider-handle-bg: #fff;

--slider-handle-border: 0;

--slider-handle-width: 16px;

--slider-handle-height: 16px;

--slider-handle-radius: 9999px;

--slider-handle-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,.32);

--slider-handle-shadow-active: 0.5px 0.5px 2px 1px rgba(0,0,0,.42);

--slider-handle-ring-width: 3px;

--slider-handle-ring-color: #10B98130;



--slider-tooltip-font-size: 0.875rem;

--slider-tooltip-line-height: 1.25rem;

--slider-tooltip-font-weight: 600;

--slider-tooltip-min-width: 20px;

--slider-tooltip-bg: #10B981;

--slider-tooltip-bg-disabled: #9CA3AF;

--slider-tooltip-color: #fff;

--slider-tooltip-radius: 5px;

--slider-tooltip-py: 2px;

--slider-tooltip-px: 6px;

--slider-tooltip-arrow-size: 5px;

--slider-tooltip-distance: 3px;

```



Override them globally:



``` css

:root {

  --slider-connect-bg: #3B82F6;

  --slider-tooltip-bg: #3B82F6;

  --slider-handle-ring-color: #3B82F630;

}

```



Or on instance level:



``` vue



```



``` css

.slider-red {

  --slider-connect-bg: #EF4444;

  --slider-tooltip-bg: #EF4444;

  --slider-handle-ring-color: #EF444430;

}



.slider-blue {

  --slider-connect-bg: #3B82F6;

  --slider-tooltip-bg: #3B82F6;

  --slider-handle-ring-color: #3B82F630;

}

```



### Styling with Tailwind CSS



To use the slider with Tailwind CSS you must add it as a plugin to `tailwind.config.js`:



``` js

// tailwind.config.js



module.exports = {

  // ...

  plugins: [

    require('@vueform/slider/tailwind'),

  ]

}

```



This plugin adds certain utilities and variants which are neccessary for the slider but Tailwind does not provide by default.



After that you need to import `themes/tailwind.scss` to you main component:



``` vue



  


    

  



  // ...



  @import 'path/to/node_modules/@vueform/slider/themes/tailwind.scss'



```



#### Using `:classes` prop



Alternatively you can define class names directly by passing them to the `Slider` component via `classes` property. When using this approach you don't need to import `tailwind.scss`. Here's a default styling for Tailwind CSS (the same included in `tailwind.scss`):



``` vue



```



There are certain variants that help detecting different states/config of the slider:

* `h` - applied when the slider is horizontal

* `v` - applied when the slider is vertical

* `merge-h` - applied when the slider is horizontal and tooltips are merged

* `merge-v` - applied when the slider is horizontal and tooltips are merged

* `disabled` - applied when the slider is disabled

* `txt-rtl-h` - applied when the slider is horizontal and text direction is set to `rtl`

* `tap` - applied when the slider bar is being taped to jump to certain position

* `tt-focus` - applied when the slider should only display tooltips on focus (`showToolip: 'focus'`) and the slider is not focused

* `tt-focused` - applied when the slider should only display tooltips on focus and the slider is focused

* `tt-drag` - applied when the slider should only display tooltips on drag (`showToolip: 'drag'`) and the slider is not being dragged

* `tt-dragging` - applied when the slider should only display tooltips on drag and the slider is being dragged



The `target` class receives `ltr`, `rtl`, `horizontal`, `vertical`, `textDirectionRtl`, `textDirectionLtr`, `focused`, `tooltipFocus`, `tooltipDrag`, `tap`, and `drag` classes when the related state is applied.



Certain classes do not define any styles (like `.slider-horizontal`, `.slider-vertical`) but only required to detect certain states. If you are changing the class list for any class name make sure to always keep the ones that start with `slider-` to be able to use the utilities mentioned above (`h`, `v`, etc).



In case you need to override the same type of utility you might use [@neojp/tailwind-important-variant](https://www.npmjs.com/package/@neojp/tailwindcss-important-variant) and use eg. `bg-green-500!`.



## Examples



* [Single slider](#single-slider)

* [Multiple slider](#multiple-slider)

* [Tooltip formatting](#tooltip-formatting)

* [Tooltip mergin](#tooltip-merging)

* [Vertical slider](#vertical-slider)



### Single slider



``` vue



  



  import Slider from '@vueform/slider'



  export default {

    components: { Slider },

    data: () => ({

      value: 20

    })

  }



```



[JSFiddle - Example #1](https://jsfiddle.net/0Lp1bqyv/)



### Multiple slider



``` vue



  



  import Slider from '@vueform/slider'



  export default {

    components: { Slider },

    data: () => ({

      value: [20, 40]

    })

  }



```



[JSFiddle - Example #2](https://jsfiddle.net/0Lp1bqyv/)



### Tooltip formatting



``` vue



  



  import Slider from '@vueform/slider'



  export default {

    components: { Slider },

    data: () => ({

      value: 20,

      format: function (value) {

        return `€${Math.round(value)}`

      }

    })

  }



```



[JSFiddle - Example #3](https://jsfiddle.net/0Lp1bqyv/)



### Tooltip merging



``` vue



  



  import Slider from '@vueform/slider'



  export default {

    components: { Slider },

    data: () => ({

      value: [20, 30, 40],

      merge: 10,

      format: {

        prefix: '$',

        decimals: 2

      }

    })

  }



```



[JSFiddle - Example #4](https://jsfiddle.net/0Lp1bqyv/)



### Vertical slider



``` vue



  



  import Slider from '@vueform/slider'



  export default {

    components: { Slider },

    data: () => ({

      value: 50,

      orientation: 'vertical',

      direction: 'rtl'

    })

  }



```



[JSFiddle - Example #5](https://jsfiddle.net/0Lp1bqyv/)



## License



[MIT](https://github.com/vueform/slider/blob/main/LICENSE.md)