1. using`v-if` instead of`v-show` or`display: none`.

2. use prop`show` to control display.

3. After the component appears, to call the`refresh` method.

| Props| Type| Default| Description|

| -----------|:--------------| ---------|--------------|

| direction| String| horizontal| Set the direction of the component, optional value:['horizontal', 'vertical']|

| event-type| String| auto| The event type, optional value:['auto', 'none']|

| width| Number[,String(in horizontal)]| auto| Width of the component|

| height| Number[,String(in vertical)]| 6| Height of the component|

| dot-size| Number| 16| Determines width and height of the sliders. to set different values of`width` &`height` use`dot-width` &`dot-height` props|

| dot-width| Number| value of`dot-size` prop| Width of sliders. If specified, overrides value of`dot-size`|

| dot-height| Number| value of`dot-size` prop| Height of sliders. If specified, overrides value of`dot-size`|

| min| Number| 0| The minimum numerical value that can be selected|

| max| Number| 100| The maximum numerical value that can be selected|

| interval| Number| 1| The gap between the values|

| show| Boolean| true| Display of the component|

| speed| Number| 0.5| Transition time|

| disabled| Boolean[, Array<Boolean>(in range model)]| false| Whether to disable the component|

| debug| Boolean| true| If you do not need to print errors in the production environment, can be set to`process.env.NODE_ENV !== 'production'`|

| piecewise| Boolean| false| Whether to display sub-values as as piecewise nodes|

| piecewise-label*| Boolean| false| Whether to display the label.|

| tooltip| String, Boolean| always| Control the tooltip, optional value:['hover', 'always', false]|

| tooltip-dir| String[,Array(in range model)| top(in horizontal)or left(in vertical)| Set the direction of the tooltip, optional value:['top', 'bottom', 'left', 'right']|

| reverse| Boolean| false| Whether the component reverse (such as Right to left, Top to bottom)|

| value| Number, String, Array, Object| 0| Initial value (if the value for the array open range model)|

| data| Array| null| The custom data.|

| clickable| Boolean| true| Whether or not the slider is clickable as well as drag-able|

| enable-cross*| Boolean| true| Whether to allow crossover in range mode|

| start-animation*| Boolean| false| Whether to enable the initial animation|

| tooltip-merge*| Boolean| true| Whether to merge with tooltip overlap|

| merge-formatter*| String, Function| null| Formatting of the merged value, for example:`merge-formatter="¥{value1} ~ ¥{value2}"` or`` merge-formatter: (v1, v2) => `¥${v1} ~ ¥${v2}```.|

| stop-propagation*| Boolean| false| All events call`stopPropagation`|

| real-time*| Boolean| false| Whether the real-time computing the layout of the components|

| lazy*| Boolean| false| At the end of the drag and drop, to synchronization value (if each update to high consumption of operation (such as Ajax), it is more useful)|

| fixed* | Boolean | false | Fixed distance between two values (valid only in range mode).[Example]

| min-range* | Number | null | Minimum range in range mode

| max-range* | Number | null | Maximum range in range mode

| process-draggable*| Boolean| false| Whether the process bar is draggable (valid only in range mode).|

| formatter*      | String,Function| null  | Formatting of a tooltip's values, for example:`formatter='¥{value}'` or`` formatter: (v) => `¥${v}```.|

| use-keyboard*| Boolean| false| Whether to open the keyboard control (Only support the arrow keys).|

| actions-keyboard*| Array|`[(i) => i - 1, (i) => i + 1]`| In the keyboard control mode, reduce(←, ↓) and increase(→, ↑) the calling method.(`i` is the index value)|

| bg-style*| Object| null| The style of the background.|

| slider-style*| Object[, Array(in range model), Function<Value, Index>]| null| The style of the slider.|

| disabled-style*| Object| null| The style of the slider in disabled state.|

| disabled-dot-style*| Object, Array, Function<Value, Index>]| null| The style of the dot in disabled state.|

| process-style*| Object| null| The style of the process bar.|

| piecewise-style*| Object| null| The style of the piecewise dot.|

| piecewise-active-style*| Object| null| The style of the piecewise dot in the activated state.|

| tooltip-style*| Object[, Array(in range model), Function<Value, Index>]| null| The style of the tooltip.|

| label-style*| Object| null| The style of the label.|

| label-active-style*| Object| null| The style of the label in the activated state.|

| focus-style*| Object[, Array(in range model), Function<Value, Index>]| null| The style of the slider when it is focused. (Works only when`use-keyboard` is`true`)|

prop*:[only supported in vue2]

| Name| Type| Description|

| -----------|:---------------| ---------------------------|

| setValue| Params: value[, noCallback: boolean, speed: number]| set value of the component|

| setIndex| Params: index*| set index of the component|

| getValue| Return: value| get value of the component|

| getIndex| Return: index*| get index of the component|

| refresh| null| Refresh the component|

*[ index] is the index to the array in the custom data model *

*[ index] is equal to (( value - min ) / interval ) in normal mode *

| Name| Type| Description|

| --------------|:--------------|--------------|

| callback| Params: value[Number\| Array]| values change when the callback function. (Changes in the direct assignment value will not trigger the callback, it is recommended to use`setValue` method)|

| drag-start  | Params: context[Object]| Drag the start event|

| drag-end| Params: context[Object]| Drag the end event|

| on-keypress| Params: value[Number\| Array]| keyboard event|

| Name| Description|

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

| tooltip| Customize the tooltip slot. optional value:[`value`,`index`,`disabled`(only range model),`merge`(only tooltipMerge is`true`)]|

| piecewise| Customize the piecewise slot. optional value:[`label`,`index`,`active`,`first`,`last`]|

| label| Customize the label slot. optional value:[`label`,`index`,`active`,`first`,`last`]|

[#](https://vuejs.org/v2/guide/components.html#Scoped-Slots) When using the template element as a slot, can add special properties`scope` or`slot-scope` to get the value.

e.g.

<vue-range-sliderv-model="value">

<templateslot="tooltip"scope="{value}">

<divclass="diy-tooltip">

{{ value }}

</div>

</template>

</vue-range-slider>

<vue-range-sliderv-model="value">

<divclass="diy-tooltip"slot="tooltip"slot-scope="{ value }">

{{ value }}

</div>

</vue-range-slider>

This hack is just to avoid the server side 'document' error when using it with Nuxt.js.

Use it if you don't need to have this component rendered on the server side.

1. Install[this](https://github.com/egoist/vue-no-ssr) and add it to the variable`components`. i.e.

let components= {

'no-ssr': NoSSR

}

2. In your template, encapsulate 'vue-range-slider' into the 'no-ssr' component to avoid redner the html on the server like this:

<no-ssr>

<vue-range-sliderref="slider"></vue-range-slider>

</no-ssr>

3. Require the library just for client side and add the 'vue-range-slider' component to the template component list

if (process.browser) {

let VueRangeSlider=require('vue-range-slider')

components['vue-range-slider']= VueRangeSlider

}

4. Apply the components

exportdefault {

components

}

[MIT](LICENSE)