vue-slider-component
Can use the slider in vue1.x and vue2.x
Install
npm install vue-slider-component --save
Update
- Remove class-name & styles (can use vue native props [style, class])
- Remove val prop, use v-model set value (Don't need to manually two-way binding)
- Optimize the click range
- No longer update vue1.x, but still can be normal use
- Add
lazy
prop - Support array setIndex method parameters
- Support ie 9+
- Add props
*-style
for the custom style - Add
formatter
prop - Add
clickable
prop tooltipDir
andsliderStyle
andtooltipStyle
prop support type: Array- Add
real-time
prop for real-time computing the layout of the components - Add labels of piecewise, and the style of the corresponding
Todo
- Basis
- Display maximum value & minimum value
- piecewise style
- Compatible with PC and mobile terminal
- Tooltip
- The custom data
- Range
- The vertical component
Example
cd example/# install dependenciesnpm install# serve with hot reload at localhost:9000npm run dev
usage
Use in vue1.x
e.g:
Use in vue2.x
e.g:
Use with Browserify (vueify)
Use this little fix:
e.g:
Options
Props
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', 'touch', 'mouse', '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 | size of the sliders |
min | Number | 0 | the minimum value |
max | Number | 100 | the maximum value |
interval | Number | 1 | the gap between the values |
show | Boolean | true | display of the component |
speed | Number | 0.5 | transition time |
disabled | Boolean | false | whether to disable components |
piecewise | Boolean | false | whether to display the piecewise |
piecewise-label* | Boolean | false | whether to display the label. demo here |
tooltip | String, Boolean | false | 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,Array | 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 |
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) |
formatter* | String,Function | null | Formatting a tooltip values, Example: formatter='¥{value}' or formatter: (v) => `¥${v}` . demo here |
bg-style* | Object | null | The style of the background. |
slider-style* | Object[,Array(in range model)] | null | The style of the slider. |
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)] | 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. |
prop*: [only support vue2]
Function
Name | Type | Description |
---|---|---|
setValue | Params: value | 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 *
Events
Name | Type | Description |
---|---|---|
callback | Params: value[Number] | values change when the callback function |
drag-start | Params: context[Object] | Drag the staUnable to initialize the width componentsrt event |
drag-end | Params: context[Object] | Drag the end event |
Exceptions
if the component initialization in a v-show="false" / display: none
container or use transform / animation
to appear component, there may be an exception ( The slider cannot be used, because the component can not initialize the size or slider position ).
The solution:
- set prop
:real-time="true"
, if the initial value not equal to the minimum, need to call therefresh
method - using
v-if
instead ofv-show
ordisplay: none
. - use prop
show
to control display. - After the component appears, to call the
refresh
method.