svelte-nouislider

Installation

Npm

npm install --save @woden/svelte-nouislider

Yarn

yarn add @woden/svelte-nouislider

Basic Usage

<script>
import nouislider from '@woden/svelte-nouislider'
</script>

<nouislider
  start={[0, 10]}
  on:slide={
    e => console.log(e.detail.values)          
  }
/>

Props

| Name | Type | Description | Default value | | ------------------- | ------------ | ---------------------------------------------- | ------------- | | start | String/String[] | The start option sets the number of handles and corresponding start positions. | none | | connect | Boolean/String/Array | The connect option can be used to control the bar between the handles or the edges of the slider. For more informations | false | | margin | Number | When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders. | none | | limit | Number | The limit option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the limit option can only be used on linear sliders. | none | | padding | Number/Number[] | Padding limits how close to the slider edges handles can be. Form more informations | 0 | | step | Number | By default, the slider slides fluently. In order to make the handles jump between intervals, you can use the step option. | none | | orientation | String | The orientation setting can be used to set the slider to "vertical" or "horizontal". | 'horizontal' | | direction | String | By default the sliders are top-to-bottom and left-to-right, but you can change this using the direction option, which decides where the upper side of the slider is. | 'ltr' | | tooltips | Any | noUiSlider can provide a basic tooltip using the tooltips option. This option can also accept formatting options to format the tooltips content. | false | | animate | Boolean | Set the animate option to false to prevent the slider from animating to a new value with when calling .set(). For more informations | true | | animationDuration | Number | The animationDuration option can be used to set the animation speed assumed by the slider library. | 300 | | keyboardSupport | Boolean | Handles in the slider can receive keyboard focus and be moved by arrow keys. | true | | range | Object | All values on the slider are part of a range. The range has a minimum and maximum value. The minimum value cannot be equal to the maximum value. For more informations | { min: 0, max: 100 } |

Events

All events provide the same output values (inside the detail object)

• values : Current slider values (array)
• handle : Handle that caused the event (number)
• unencoded: Slider values without formatting (array)
• tap : Event was caused by the user tapping the slider (boolean)
• positions : Left offset of the handles (array)

| Name | Description | | ---- | ----------- | | update | Use this event when synchronizing the slider value to another element, such as an . It fires every time the slider values are changed, either by a user or by calling API methods. Additionally, it fires immediately when bound. In most cases, this event should be more convenient than the 'slide' event. | | slide | This event is useful when you specifically want to listen to a handle being dragged, but want to ignore other updates to the slider value. This event also fires on a change by a 'tap'. In most cases, the 'update' is the better choice. | | set | Whenever a slider is changed to a new value, this event is fired. This function will trigger every time a slider stops changing, including after calls to the .set() method. You can consider this 'end of slide'. | | change | This event is similar to the 'change' events on regular elements. It fires when a user stops sliding, when a slider value is changed by 'tap', or on keyboard interaction. | | start | This event fires when a handle is clicked (mousedown, or the equivalent touch events). | | end | This event is the opposite of the 'start' event. If fires when a handle is released (mouseup etc), or when a slide is canceled due to other reasons (such as mouse cursor leaving the browser window). |