├── .babelrc ├── .editorconfig ├── .gitignore ├── .npmignore ├── .nvmrc ├── LICENSE ├── README.md ├── dist ├── vue-range-slider.css ├── vue-range-slider.css.map ├── vue-range-slider.esm.js ├── vue-range-slider.js ├── vue-range-slider.min.css ├── vue-range-slider.min.css.map └── vue-range-slider.min.js ├── gulpfile.js ├── package.json └── src ├── index.js ├── js ├── utils.js └── vue-range-slider.js └── styl └── vue-range-slider.styl /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/env", { 4 | "modules": false 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | package-lock.json 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build/ 2 | config/ 3 | docs/ 4 | doc/ 5 | example/ 6 | static/ 7 | demos/ 8 | src/ 9 | .idea/ 10 | .github/ 11 | gulpfile.js 12 | postcss.config.js 13 | .bin/ 14 | .DS_Store 15 | .npm-debug.log 16 | .babelrc 17 | .npmignore 18 | .editorconfig 19 | .eslintrc.js 20 | index.html 21 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 11 -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Lemon 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-range-slider 2 | A range slider component based on vue (Vue滑块组件). 3 | 4 | [![downloads](https://img.shields.io/npm/dt/vue-range-component.svg)](https://www.npmjs.com/package/vue-range-component) 5 | [![npm-version](https://img.shields.io/npm/v/vue-range-component.svg)](https://www.npmjs.com/package/vue-range-component) 6 | [![license](https://img.shields.io/npm/l/express.svg)]() 7 | 8 | Can use the slider in vue2.x. 9 | 10 | ## Live demos 11 | 12 | [Demo01](https://jsfiddle.net/xwpongithub/mtzpr21g/) 13 | 14 | [Demo02](https://jsfiddle.net/xwpongithub/njdwphrm/) 15 | 16 | [Demo03](https://jsfiddle.net/xwpongithub/q3xpkgcy/) 17 | 18 | [Demo04](https://jsfiddle.net/xwpongithub/0skre953/) 19 | 20 | [Demo05](https://jsfiddle.net/xwpongithub/vfgw1hks/) 21 | 22 | ## Todo 23 | 24 | - [x] Basis 25 | - [x] Display maximum value & minimum value 26 | - [x] piecewise style 27 | - [x] Compatible with PC and mobile terminal 28 | - [x] Tooltip 29 | - [x] The custom data 30 | - [x] Range 31 | - [x] The vertical component 32 | 33 | ## Install 34 | ``` bash 35 | npm install vue-range-component --save 36 | ``` 37 | 38 | ## Usage 39 | 40 | #### Direct 45 | ``` 46 | 47 | #### Use in vue project 48 | 49 | ```html 50 | 55 | 70 | ``` 71 | 72 | ## Exceptions 73 | if the component initialization in a `v-show="false" / display: none` container or use `transform / animation / margin` to change the location of the component, there may be an exception ( The slider cannot be used, because the component can not initialize the size or slider position ). 74 | 75 | The solution: 76 | 1. using `v-if` instead of `v-show` or `display: none`. 77 | 2. use prop `show` to control display. 78 | 3. After the component appears, to call the `refresh` method. 79 | 80 | ## Options 81 | 82 | ### Props 83 | | Props | Type | Default | Description | 84 | | ----------- |:--------------| ---------|--------------| 85 | | direction | String | horizontal | Set the direction of the component, optional value: ['horizontal', 'vertical'] | 86 | | event-type | String | auto | The event type, optional value: ['auto', 'none'] | 87 | | width | Number[,String(in horizontal)] | auto | Width of the component | 88 | | height | Number[,String(in vertical)] | 6 | Height of the component | 89 | | dot-size | Number | 16 | Determines width and height of the sliders. to set different values of `width` & `height` use `dot-width` & `dot-height` props | 90 | | dot-width | Number | value of `dot-size` prop | Width of sliders. If specified, overrides value of `dot-size` | 91 | | dot-height | Number | value of `dot-size` prop | Height of sliders. If specified, overrides value of `dot-size` | 92 | | min | Number | 0 | The minimum numerical value that can be selected | 93 | | max | Number | 100 | The maximum numerical value that can be selected | 94 | | step | Number | 1 | The gap between the values | 95 | | show | Boolean | true | Display of the component | 96 | | speed | Number | 0.5 | Transition time | 97 | | disabled | Boolean[, Array(in range model)] | false | Whether to disable the component | 98 | | debug | Boolean | true | If you do not need to print errors in the production environment, can be set to `process.env.NODE_ENV !== 'production'` | 99 | | piecewise | Boolean | false | Whether to display sub-values as as piecewise nodes | 100 | | piecewise-label* | Boolean | false | Whether to display the label. | 101 | | tooltip | String, Boolean | always | Control the tooltip, optional value: ['hover', 'always', false] | 102 | | 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'] | 103 | | reverse | Boolean | false | Whether the component reverse (such as Right to left, Top to bottom) | 104 | | value | Number, String, Array, Object | 0 | Initial value (if the value for the array open range model) | 105 | | data | Array | null | The custom data. | 106 | | clickable | Boolean | true | Whether or not the slider is clickable as well as drag-able | 107 | | enable-cross* | Boolean | true | Whether to allow crossover in range mode | 108 | | start-animation* | Boolean | false | Whether to enable the initial animation | 109 | | tooltip-merge* | Boolean | true | Whether to merge with tooltip overlap | 110 | | merge-formatter* | String, Function | null | Formatting of the merged value, for example: `merge-formatter="¥{value1} ~ ¥{value2}"` or `` merge-formatter: (v1, v2) => `¥${v1} ~ ¥${v2}` ``. | 111 | | stop-propagation* | Boolean | false | All events call `stopPropagation` | 112 | | real-time* | Boolean | false | Whether the real-time computing the layout of the components | 113 | | 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) | 114 | | fixed* | Boolean | false | Fixed distance between two values (valid only in range mode). [Example] 115 | | min-range* | Number | null | Minimum range in range mode 116 | | max-range* | Number | null | Maximum range in range mode 117 | | process-draggable* | Boolean | false | Whether the process bar is draggable (valid only in range mode). | 118 | | formatter*       | String,Function | null   | Formatting of a tooltip's values, for example: `formatter='¥{value}'` or `` formatter: (v) => `¥${v}` ``. | 119 | | use-keyboard* | Boolean | false | Whether to open the keyboard control (only supports the arrow keys). | 120 | | 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) | 121 | | bg-style* | Object | null | The style of the background. | 122 | | slider-style* | Object[, Array(in range model), Function] | null | The style of the slider. | 123 | | disabled-style* | Object | null | The style of the slider in disabled state. | 124 | | disabled-dot-style* | Object, Array, Function] | null | The style of the dot in disabled state. | 125 | | process-style* | Object | null | The style of the process bar. | 126 | | piecewise-style* | Object | null | The style of the piecewise dot. | 127 | | piecewise-active-style* | Object | null | The style of the piecewise dot in the activated state. | 128 | | tooltip-style* | Object[, Array(in range model), Function] | null | The style of the tooltip. | 129 | | label-style* | Object | null | The style of the label. | 130 | | label-active-style* | Object | null | The style of the label in the activated state. | 131 | | focus-style* | Object[, Array(in range model), Function] | null | The style of the slider when it is focused. (Works only when `use-keyboard` is `true`) | 132 | 133 | ### Function 134 | | Name | Type | Description | 135 | | ----------- |:---------------| ---------------------------| 136 | | setValue | Params: value [, noCallback: boolean, speed: number] | set value of the component | 137 | | setIndex | Params: index* | set index of the component | 138 | | getValue | Return: value | get value of the component | 139 | | getIndex | Return: index* | get index of the component | 140 | | refresh | null | Refresh the component | 141 | 142 | * [ index ] is the index to the array in the custom data model * 143 | * [ index ] is equal to (( value - min ) / interval ) in normal mode * 144 | 145 | ### Events 146 | | Name | Type | Description | 147 | | --------------|:--------------|--------------| 148 | | slide-end | 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) | 149 | | drag-start   | Params: context[Object]| Drag the start event | 150 | | drag-end | Params: context[Object]| Drag the end event | 151 | | on-keypress | Params: value[Number \| Array]| keyboard event | 152 | 153 | ### Slot 154 | | Name | Description | 155 | | --------------|--------------| 156 | | dot | Customize the dot slot. optional value: [value, disabled, index(only range model)] | 157 | | tooltip | Customize the tooltip slot. optional value: [`value`, `index`, `disabled`(only range model), `merge`(only tooltipMerge is `true`)] | 158 | | piecewise | Customize the piecewise slot. optional value: [`label`, `index`, `active`, `first`, `last`] | 159 | | label | Customize the label slot. optional value: [`label`, `index`, `active`, `first`, `last`] | 160 | 161 | [#](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. 162 | 163 | e.g. 164 | ```html 165 | 166 | 171 | 172 | 173 | 174 | 175 |
176 | {{ value }} 177 |
178 | 179 | ``` 180 | 181 | ## Using it with NUXT.js 182 | 183 | This hack is just to avoid the server side 'document' error when using it with Nuxt.js. 184 | Use it if you don't need to have this component rendered on the server side. 185 | 186 | 1. Install [this](https://github.com/egoist/vue-no-ssr) and add it to the variable `components`. i.e. 187 | ```js 188 | import NoSSR from 'vue-no-ssr' 189 | 190 | let components = { 191 | /** 192 | * Add No Server Side Render component 193 | * to make client DOM math the server DOM 194 | */ 195 | 'no-ssr': NoSSR 196 | } 197 | ``` 198 | 199 | 2. In your template, encapsulate 'vue-range-slider' into the 'no-ssr' component to avoid render the html on the server like this: 200 | ```html 201 | 202 | 203 | 204 | ``` 205 | 206 | 3. Require the library just for client side and add the 'vue-range-slider' component to the template component list 207 | ```js 208 | if (process.browser) { 209 | // in older versions of nuxt, it's process.BROWSER_BUILD 210 | let VueRangeSlider = require('vue-range-component') 211 | components['vue-range-slider'] = VueRangeSlider 212 | } 213 | ``` 214 | 215 | 4. Apply the components 216 | ```js 217 | export default { 218 | components 219 | } 220 | ``` 221 | 222 | ## License 223 | 224 | [MIT](LICENSE) 225 | -------------------------------------------------------------------------------- /dist/vue-range-slider.css: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-range-slider v1.0.3 3 | * (c) 2016-2019 xwpongithub 4 | * Released under the MIT License. 5 | */ 6 | .vue-range-slider.slider-component { 7 | position: relative; 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | -ms-user-select: none; 13 | user-select: none; 14 | } 15 | .vue-range-slider.slider-component .slider { 16 | position: relative; 17 | display: block; 18 | border-radius: 15px; 19 | background-color: #ccc; 20 | } 21 | .vue-range-slider.slider-component .slider::after { 22 | content: ''; 23 | position: absolute; 24 | left: 0; 25 | top: 0; 26 | width: 100%; 27 | height: 100%; 28 | z-index: 2; 29 | } 30 | .vue-range-slider.slider-component .slider .slider-dot { 31 | position: absolute; 32 | -webkit-transition: all 0s; 33 | transition: all 0s; 34 | will-change: transform; 35 | cursor: pointer; 36 | z-index: 5; 37 | } 38 | .vue-range-slider.slider-component .slider .slider-dot .slider-dot-handle { 39 | width: 100%; 40 | height: 100%; 41 | border-radius: 50%; 42 | background-color: #fff; 43 | -webkit-box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,0.32); 44 | box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,0.32); 45 | } 46 | .vue-range-slider.slider-component .slider .slider-dot.slider-dot-focus .slider-dot-handle { 47 | -webkit-box-shadow: 0 0 2px 1px #3498db; 48 | box-shadow: 0 0 2px 1px #3498db; 49 | } 50 | .vue-range-slider.slider-component .slider .slider-dot.slider-dot-dragging { 51 | z-index: 5; 52 | } 53 | .vue-range-slider.slider-component .slider .slider-dot.slider-dot-disabled { 54 | z-index: 4; 55 | } 56 | .vue-range-slider.slider-component .slider .slider-dot.slider-hover:hover .slider-tooltip-wrap { 57 | display: block; 58 | } 59 | .vue-range-slider.slider-component .slider .slider-dot.slider-always .slider-tooltip-wrap { 60 | display: block !important; 61 | } 62 | .vue-range-slider.slider-component .slider .slider-process { 63 | position: absolute; 64 | border-radius: 15px; 65 | background-color: #3498db; 66 | z-index: 1; 67 | } 68 | .vue-range-slider.slider-component .slider .slider-process.slider-process-draggable { 69 | cursor: pointer; 70 | z-index: 3; 71 | } 72 | .vue-range-slider.slider-component .slider .slider-input { 73 | position: absolute; 74 | overflow: hidden; 75 | height: 1px; 76 | width: 1px; 77 | clip: rect(1px, 1px, 1px, 1px); 78 | } 79 | .vue-range-slider.slider-component .slider .slider-piecewise { 80 | position: absolute; 81 | width: 100%; 82 | padding: 0; 83 | margin: 0; 84 | left: 0; 85 | top: 0; 86 | height: 100%; 87 | list-style: none; 88 | } 89 | .vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item { 90 | position: absolute; 91 | width: 8px; 92 | height: 8px; 93 | } 94 | .vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:first-child .piecewise-dot, 95 | .vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:last-child .piecewise-dot { 96 | visibility: hidden; 97 | } 98 | .vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item .piecewise-dot { 99 | position: absolute; 100 | left: 50%; 101 | top: 50%; 102 | width: 100%; 103 | height: 100%; 104 | display: inline-block; 105 | background-color: rgba(0,0,0,0.16); 106 | border-radius: 50%; 107 | -webkit-transform: translate(-50%, -50%); 108 | transform: translate(-50%, -50%); 109 | z-index: 2; 110 | -webkit-transition: all 0.3s; 111 | transition: all 0.3s; 112 | } 113 | .vue-range-slider.slider-component.slider-horizontal .slider-dot { 114 | left: 0; 115 | } 116 | .vue-range-slider.slider-component.slider-horizontal .slider-process { 117 | width: 0; 118 | height: 100%; 119 | top: 0; 120 | left: 0; 121 | will-change: width; 122 | } 123 | .vue-range-slider.slider-component.slider-vertical .slider-dot { 124 | bottom: 0; 125 | } 126 | .vue-range-slider.slider-component.slider-vertical .slider-process { 127 | width: 100%; 128 | height: 0; 129 | bottom: 0; 130 | left: 0; 131 | will-change: height; 132 | } 133 | .vue-range-slider.slider-component.slider-horizontal-reverse .slider-dot { 134 | right: 0; 135 | } 136 | .vue-range-slider.slider-component.slider-horizontal-reverse .slider-process { 137 | width: 0; 138 | height: 100%; 139 | top: 0; 140 | right: 0; 141 | } 142 | .vue-range-slider.slider-component.slider-vertical-reverse .slider-dot { 143 | top: 0; 144 | } 145 | .vue-range-slider.slider-component.slider-vertical-reverse .slider-process { 146 | width: 100%; 147 | height: 0; 148 | top: 0; 149 | left: 0; 150 | } 151 | .vue-range-slider.slider-component.slider-horizontal .slider-piecewise .piecewise-item .piecewise-label, 152 | .vue-range-slider.slider-component.slider-horizontal-reverse .slider-piecewise .piecewise-item .piecewise-label { 153 | position: absolute; 154 | display: inline-block; 155 | top: 100%; 156 | left: 50%; 157 | white-space: nowrap; 158 | font-size: 12px; 159 | color: #333; 160 | -webkit-transform: translate(-50%, 8px); 161 | transform: translate(-50%, 8px); 162 | visibility: visible; 163 | } 164 | .vue-range-slider.slider-component.slider-vertical .slider-piecewise .piecewise-item .piecewise-label, 165 | .vue-range-slider.slider-component.slider-vertical-reverse .slider-piecewise .piecewise-item .piecewise-label { 166 | position: absolute; 167 | display: inline-block; 168 | top: 50%; 169 | left: 100%; 170 | white-space: nowrap; 171 | font-size: 12px; 172 | color: #333; 173 | -webkit-transform: translate(8px, -50%); 174 | transform: translate(8px, -50%); 175 | visibility: visible; 176 | } 177 | .vue-range-slider.slider-component .slider-tooltip-wrap { 178 | display: none; 179 | position: absolute; 180 | z-index: 9; 181 | } 182 | .vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip { 183 | display: block; 184 | visibility: hidden; 185 | } 186 | .vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top { 187 | top: -9px; 188 | left: 50%; 189 | -webkit-transform: translate(-50%, -100%); 190 | transform: translate(-50%, -100%); 191 | } 192 | .vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top .slider-tooltip::before { 193 | content: ''; 194 | position: absolute; 195 | bottom: -10px; 196 | left: 50%; 197 | width: 0; 198 | height: 0; 199 | border: 5px solid transparent; 200 | border-top-color: inherit; 201 | -webkit-transform: translate(-50%, 0); 202 | transform: translate(-50%, 0); 203 | } 204 | .vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom { 205 | bottom: -9px; 206 | left: 50%; 207 | -webkit-transform: translate(-50%, 100%); 208 | transform: translate(-50%, 100%); 209 | } 210 | .vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom .slider-tooltip::before { 211 | content: ''; 212 | position: absolute; 213 | top: -10px; 214 | left: 50%; 215 | width: 0; 216 | height: 0; 217 | border: 5px solid transparent; 218 | border-bottom-color: inherit; 219 | -webkit-transform: translate(-50%, 0); 220 | transform: translate(-50%, 0); 221 | } 222 | .vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left { 223 | top: 50%; 224 | left: -9px; 225 | -webkit-transform: translate(-100%, -50%); 226 | transform: translate(-100%, -50%); 227 | } 228 | .vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left .slider-tooltip::before { 229 | content: ''; 230 | position: absolute; 231 | top: 50%; 232 | right: -10px; 233 | width: 0; 234 | height: 0; 235 | border: 5px solid transparent; 236 | border-left-color: inherit; 237 | -webkit-transform: translate(0, -50%); 238 | transform: translate(0, -50%); 239 | } 240 | .vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right { 241 | top: 50%; 242 | right: -9px; 243 | -webkit-transform: translate(100%, -50%); 244 | transform: translate(100%, -50%); 245 | } 246 | .vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right .slider-tooltip::before { 247 | content: ''; 248 | position: absolute; 249 | top: 50%; 250 | left: -10px; 251 | width: 0; 252 | height: 0; 253 | border: 5px solid transparent; 254 | border-right-color: inherit; 255 | -webkit-transform: translate(0, -50%); 256 | transform: translate(0, -50%); 257 | } 258 | .vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip { 259 | display: block; 260 | visibility: hidden; 261 | } 262 | .vue-range-slider.slider-component .slider-tooltip-wrap .slider-tooltip { 263 | display: block; 264 | font-size: 14px; 265 | white-space: nowrap; 266 | padding: 2px 5px; 267 | min-width: 20px; 268 | text-align: center; 269 | color: #fff; 270 | border-radius: 5px; 271 | border: 1px solid #3498db; 272 | background-color: #3498db; 273 | } 274 | .vue-range-slider.slider-component.slider-disabled { 275 | opacity: 0.5; 276 | cursor: not-allowed; 277 | } 278 | .vue-range-slider.slider-component.slider-disabled .slider-dot { 279 | cursor: not-allowed; 280 | } 281 | .vue-range-slider.slider-component.slider-has-label { 282 | margin-bottom: 15px; 283 | } 284 | 285 | /*# sourceMappingURL=vue-range-slider.css.map */ 286 | -------------------------------------------------------------------------------- /dist/vue-range-slider.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["vue-range-slider.styl","vue-range-slider.css"],"names":[],"mappings":";;;;;AACE;EACE,kBAAU;EACV,8BAAY;UAAZ,sBAAY;EACZ,yBAAa;KAAb,sBAAa;MAAb,qBAAa;UAAb,iBAAa;ACAjB;ADCI;EACE,kBAAU;EACV,cAAS;EACT,mBAAe;EACf,sBAAkB;ACCxB;ADAM;EACE,WAAS;EACT,kBAAU;EACV,OAAM;EACN,MAAK;EACL,WAAO;EACP,YAAQ;EACR,UAAS;ACEjB;ADDM;EACE,kBAAU;EACV,0BAAY;EAAZ,kBAAY;EACZ,sBAAa;EACb,eAAQ;EACR,UAAS;ACGjB;ADFQ;EACE,WAAO;EACP,YAAQ;EACR,kBAAe;EACf,sBAAkB;EAClB,wDAAY;UAAZ,gDAAY;ACItB;ADFU;EACE,uCAAY;UAAZ,+BAAY;ACIxB;ADHQ;EACE,UAAS;ACKnB;ADJQ;EACE,UAAS;ACMnB;ADHY;EACE,cAAS;ACKvB;ADHU;EACE,yBAAS;ACKrB;ADJM;EACE,kBAAU;EACV,mBAAe;EACf,yBAAkB;EAClB,UAAS;ACMjB;ADLQ;EACE,eAAQ;EACR,UAAS;ACOnB;ADNM;EACE,kBAAU;EACV,gBAAU;EACV,WAAQ;EACR,UAAO;EACP,8BAAM;ACQd;ADPM;EACE,kBAAU;EACV,WAAO;EACP,UAAS;EACT,SAAQ;EACR,OAAM;EACN,MAAK;EACL,YAAQ;EACR,gBAAY;ACSpB;ADRQ;EACE,kBAAU;EACV,UAAO;EACP,WAAQ;ACUlB;ADRY;;EACE,kBAAY;ACW1B;ADVU;EACE,kBAAU;EACV,SAAM;EACN,QAAK;EACL,WAAO;EACP,YAAQ;EACR,qBAAS;EACT,kCAAkB;EAClB,kBAAe;EACf,wCAAW;UAAX,gCAAW;EACX,UAAS;EACT,4BAAY;EAAZ,oBAAY;ACYxB;ADVM;EACE,OAAK;ACYb;ADXM;EACE,QAAO;EACP,YAAQ;EACR,MAAK;EACL,OAAM;EACN,kBAAa;ACarB;ADXM;EACE,SAAO;ACaf;ADZM;EACE,WAAO;EACP,SAAQ;EACR,SAAQ;EACR,OAAM;EACN,mBAAa;ACcrB;ADZM;EACE,QAAM;ACcd;ADbM;EACE,QAAO;EACP,YAAQ;EACR,MAAK;EACL,QAAO;ACef;ADbM;EACE,MAAI;ACeZ;ADdM;EACE,WAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;ACgBd;ADZU;;EACE,kBAAU;EACV,qBAAS;EACT,SAAK;EACL,SAAM;EACN,mBAAa;EACb,eAAW;EACX,WAAO;EACP,uCAAW;UAAX,+BAAW;EACX,mBAAY;ACexB;ADXU;;EACE,kBAAU;EACV,qBAAS;EACT,QAAK;EACL,UAAM;EACN,mBAAa;EACb,eAAW;EACX,WAAO;EACP,uCAAW;UAAX,+BAAW;EACX,mBAAY;ACcxB;ADbI;EACE,aAAS;EACT,kBAAU;EACV,UAAS;ACef;ADdM;EACE,cAAQ;EACR,kBAAW;ACgBnB;ADfM;EACE,SAAK;EACL,SAAM;EACN,yCAAW;UAAX,iCAAW;ACiBnB;ADhBQ;EACE,WAAS;EACT,kBAAU;EACV,aAAQ;EACR,SAAM;EACN,QAAO;EACP,SAAQ;EACR,6BAAQ;EACR,yBAAkB;EAClB,qCAAW;UAAX,6BAAW;ACkBrB;ADjBM;EACE,YAAQ;EACR,SAAM;EACN,wCAAW;UAAX,gCAAW;ACmBnB;ADlBQ;EACE,WAAS;EACT,kBAAU;EACV,UAAK;EACL,SAAM;EACN,QAAO;EACP,SAAQ;EACR,6BAAQ;EACR,4BAAqB;EACrB,qCAAW;UAAX,6BAAW;ACoBrB;ADnBM;EACE,QAAK;EACL,UAAM;EACN,yCAAW;UAAX,iCAAW;ACqBnB;ADpBQ;EACE,WAAS;EACT,kBAAU;EACV,QAAK;EACL,YAAO;EACP,QAAO;EACP,SAAQ;EACR,6BAAQ;EACR,0BAAmB;EACnB,qCAAW;UAAX,6BAAW;ACsBrB;ADrBM;EACE,QAAK;EACL,WAAO;EACP,wCAAW;UAAX,gCAAW;ACuBnB;ADtBQ;EACE,WAAS;EACT,kBAAU;EACV,QAAK;EACL,WAAM;EACN,QAAO;EACP,SAAQ;EACR,6BAAQ;EACR,2BAAoB;EACpB,qCAAW;UAAX,6BAAW;ACwBrB;ADvBM;EACE,cAAS;EACT,kBAAY;ACyBpB;ADxBM;EACE,cAAS;EACT,eAAW;EACX,mBAAa;EACb,gBAAS;EACT,eAAW;EACX,kBAAY;EACZ,WAAO;EACP,kBAAe;EACf,yBAAQ;EACR,yBAAkB;AC0B1B;ADzBI;EACE,YAAS;EACT,mBAAQ;AC2Bd;AD1BM;EACE,mBAAQ;AC4BhB;AD3BI;EACE,mBAAe;AC6BrB","file":"vue-range-slider.css","sourcesContent":[".vue-range-slider\n &.slider-component\n position: relative\n box-sizing: border-box\n user-select: none\n .slider\n position: relative\n display: block\n border-radius: 15px\n background-color: #ccc\n &::after\n content: ''\n position: absolute\n left: 0\n top: 0\n width: 100%\n height: 100%\n z-index: 2\n .slider-dot\n position: absolute\n transition: all 0s\n will-change: transform\n cursor: pointer\n z-index: 5\n .slider-dot-handle\n width: 100%\n height: 100%\n border-radius: 50%\n background-color: #fff\n box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32)\n &.slider-dot-focus\n .slider-dot-handle\n box-shadow: 0 0 2px 1px #3498db\n &.slider-dot-dragging\n z-index: 5\n &.slider-dot-disabled\n z-index: 4\n &.slider-hover\n &:hover\n .slider-tooltip-wrap\n display: block\n &.slider-always\n .slider-tooltip-wrap\n display: block!important\n .slider-process\n position: absolute\n border-radius: 15px\n background-color: #3498db\n z-index: 1\n &.slider-process-draggable\n cursor: pointer\n z-index: 3\n .slider-input\n position: absolute\n overflow: hidden\n height: 1px\n width: 1px\n clip: rect(1px, 1px, 1px, 1px)\n .slider-piecewise\n position: absolute\n width: 100%\n padding: 0\n margin: 0\n left: 0\n top: 0\n height: 100%\n list-style: none\n .piecewise-item\n position: absolute\n width: 8px\n height: 8px\n &:first-child,&:last-child\n .piecewise-dot\n visibility: hidden\n .piecewise-dot\n position: absolute\n left: 50%\n top: 50%\n width: 100%\n height: 100%\n display: inline-block\n background-color: rgba(0, 0, 0, 0.16)\n border-radius: 50%\n transform: translate(-50%, -50%)\n z-index: 2\n transition: all .3s\n &.slider-horizontal\n .slider-dot\n left:0\n .slider-process\n width: 0\n height: 100%\n top: 0\n left: 0\n will-change: width\n &.slider-vertical\n .slider-dot\n bottom:0\n .slider-process\n width: 100%\n height: 0\n bottom: 0\n left: 0\n will-change: height\n &.slider-horizontal-reverse\n .slider-dot\n right:0\n .slider-process\n width: 0\n height: 100%\n top: 0\n right: 0\n &.slider-vertical-reverse\n .slider-dot\n top:0\n .slider-process\n width: 100%\n height: 0\n top: 0\n left: 0\n &.slider-horizontal,&.slider-horizontal-reverse\n .slider-piecewise\n .piecewise-item\n .piecewise-label\n position: absolute\n display: inline-block\n top: 100%\n left: 50%\n white-space: nowrap\n font-size: 12px\n color: #333\n transform: translate(-50%, 8px)\n visibility: visible\n &.slider-vertical,&.slider-vertical-reverse\n .slider-piecewise\n .piecewise-item\n .piecewise-label\n position: absolute\n display: inline-block\n top: 50%\n left: 100%\n white-space: nowrap\n font-size: 12px\n color: #333\n transform: translate(8px, -50%)\n visibility: visible\n .slider-tooltip-wrap\n display: none\n position: absolute\n z-index: 9\n &.merged-tooltip\n display:block\n visibility:hidden\n &.slider-tooltip-top\n top: -9px\n left: 50%\n transform: translate(-50%, -100%)\n .slider-tooltip::before\n content: ''\n position: absolute\n bottom: -10px\n left: 50%\n width: 0\n height: 0\n border: 5px solid transparent\n border-top-color: inherit\n transform: translate(-50%, 0)\n &.slider-tooltip-bottom\n bottom: -9px;\n left: 50%;\n transform: translate(-50%, 100%)\n .slider-tooltip::before\n content: ''\n position: absolute\n top: -10px\n left: 50%\n width: 0\n height: 0\n border: 5px solid transparent\n border-bottom-color: inherit\n transform: translate(-50%, 0)\n &.slider-tooltip-left\n top: 50%\n left: -9px\n transform: translate(-100%, -50%)\n .slider-tooltip::before\n content: ''\n position: absolute\n top: 50%\n right: -10px\n width: 0\n height: 0\n border: 5px solid transparent\n border-left-color: inherit\n transform: translate(0, -50%)\n &.slider-tooltip-right\n top: 50%\n right: -9px\n transform: translate(100%, -50%)\n .slider-tooltip::before\n content: ''\n position: absolute\n top: 50%\n left: -10px\n width: 0\n height: 0\n border: 5px solid transparent\n border-right-color: inherit\n transform: translate(0, -50%)\n &.merged-tooltip\n display: block\n visibility: hidden\n .slider-tooltip\n display: block\n font-size: 14px\n white-space: nowrap\n padding: 2px 5px\n min-width: 20px\n text-align: center\n color: #fff\n border-radius: 5px\n border: 1px solid #3498db\n background-color: #3498db\n &.slider-disabled\n opacity: .5\n cursor: not-allowed\n .slider-dot\n cursor: not-allowed\n &.slider-has-label\n margin-bottom: 15px\n",".vue-range-slider.slider-component {\n position: relative;\n box-sizing: border-box;\n user-select: none;\n}\n.vue-range-slider.slider-component .slider {\n position: relative;\n display: block;\n border-radius: 15px;\n background-color: #ccc;\n}\n.vue-range-slider.slider-component .slider::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 2;\n}\n.vue-range-slider.slider-component .slider .slider-dot {\n position: absolute;\n transition: all 0s;\n will-change: transform;\n cursor: pointer;\n z-index: 5;\n}\n.vue-range-slider.slider-component .slider .slider-dot .slider-dot-handle {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: #fff;\n box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,0.32);\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-dot-focus .slider-dot-handle {\n box-shadow: 0 0 2px 1px #3498db;\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-dot-dragging {\n z-index: 5;\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-dot-disabled {\n z-index: 4;\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-hover:hover .slider-tooltip-wrap {\n display: block;\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-always .slider-tooltip-wrap {\n display: block !important;\n}\n.vue-range-slider.slider-component .slider .slider-process {\n position: absolute;\n border-radius: 15px;\n background-color: #3498db;\n z-index: 1;\n}\n.vue-range-slider.slider-component .slider .slider-process.slider-process-draggable {\n cursor: pointer;\n z-index: 3;\n}\n.vue-range-slider.slider-component .slider .slider-input {\n position: absolute;\n overflow: hidden;\n height: 1px;\n width: 1px;\n clip: rect(1px, 1px, 1px, 1px);\n}\n.vue-range-slider.slider-component .slider .slider-piecewise {\n position: absolute;\n width: 100%;\n padding: 0;\n margin: 0;\n left: 0;\n top: 0;\n height: 100%;\n list-style: none;\n}\n.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:first-child .piecewise-dot,\n.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:last-child .piecewise-dot {\n visibility: hidden;\n}\n.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item .piecewise-dot {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 100%;\n height: 100%;\n display: inline-block;\n background-color: rgba(0,0,0,0.16);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n transition: all 0.3s;\n}\n.vue-range-slider.slider-component.slider-horizontal .slider-dot {\n left: 0;\n}\n.vue-range-slider.slider-component.slider-horizontal .slider-process {\n width: 0;\n height: 100%;\n top: 0;\n left: 0;\n will-change: width;\n}\n.vue-range-slider.slider-component.slider-vertical .slider-dot {\n bottom: 0;\n}\n.vue-range-slider.slider-component.slider-vertical .slider-process {\n width: 100%;\n height: 0;\n bottom: 0;\n left: 0;\n will-change: height;\n}\n.vue-range-slider.slider-component.slider-horizontal-reverse .slider-dot {\n right: 0;\n}\n.vue-range-slider.slider-component.slider-horizontal-reverse .slider-process {\n width: 0;\n height: 100%;\n top: 0;\n right: 0;\n}\n.vue-range-slider.slider-component.slider-vertical-reverse .slider-dot {\n top: 0;\n}\n.vue-range-slider.slider-component.slider-vertical-reverse .slider-process {\n width: 100%;\n height: 0;\n top: 0;\n left: 0;\n}\n.vue-range-slider.slider-component.slider-horizontal .slider-piecewise .piecewise-item .piecewise-label,\n.vue-range-slider.slider-component.slider-horizontal-reverse .slider-piecewise .piecewise-item .piecewise-label {\n position: absolute;\n display: inline-block;\n top: 100%;\n left: 50%;\n white-space: nowrap;\n font-size: 12px;\n color: #333;\n transform: translate(-50%, 8px);\n visibility: visible;\n}\n.vue-range-slider.slider-component.slider-vertical .slider-piecewise .piecewise-item .piecewise-label,\n.vue-range-slider.slider-component.slider-vertical-reverse .slider-piecewise .piecewise-item .piecewise-label {\n position: absolute;\n display: inline-block;\n top: 50%;\n left: 100%;\n white-space: nowrap;\n font-size: 12px;\n color: #333;\n transform: translate(8px, -50%);\n visibility: visible;\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap {\n display: none;\n position: absolute;\n z-index: 9;\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip {\n display: block;\n visibility: hidden;\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top {\n top: -9px;\n left: 50%;\n transform: translate(-50%, -100%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top .slider-tooltip::before {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-top-color: inherit;\n transform: translate(-50%, 0);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom {\n bottom: -9px;\n left: 50%;\n transform: translate(-50%, 100%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom .slider-tooltip::before {\n content: '';\n position: absolute;\n top: -10px;\n left: 50%;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-bottom-color: inherit;\n transform: translate(-50%, 0);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left {\n top: 50%;\n left: -9px;\n transform: translate(-100%, -50%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left .slider-tooltip::before {\n content: '';\n position: absolute;\n top: 50%;\n right: -10px;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-left-color: inherit;\n transform: translate(0, -50%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right {\n top: 50%;\n right: -9px;\n transform: translate(100%, -50%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right .slider-tooltip::before {\n content: '';\n position: absolute;\n top: 50%;\n left: -10px;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-right-color: inherit;\n transform: translate(0, -50%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip {\n display: block;\n visibility: hidden;\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap .slider-tooltip {\n display: block;\n font-size: 14px;\n white-space: nowrap;\n padding: 2px 5px;\n min-width: 20px;\n text-align: center;\n color: #fff;\n border-radius: 5px;\n border: 1px solid #3498db;\n background-color: #3498db;\n}\n.vue-range-slider.slider-component.slider-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.vue-range-slider.slider-component.slider-disabled .slider-dot {\n cursor: not-allowed;\n}\n.vue-range-slider.slider-component.slider-has-label {\n margin-bottom: 15px;\n}\n"]} -------------------------------------------------------------------------------- /dist/vue-range-slider.esm.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue-range-slider v1.0.3 3 | * (c) 2016-2019 xwpongithub 4 | * Released under the MIT License. 5 | */ 6 | 7 | // Unsharp text [#166](https://github.com/NightCatSama/vue-slider-component/issues/166) 8 | var roundToDPR = function () { 9 | var r = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1; 10 | return function (value) { 11 | return Math.round(value * r) / r; 12 | }; 13 | }(); 14 | var isMobile = function () { 15 | var userAgentInfo = navigator.userAgent.toLowerCase(); 16 | var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; 17 | var flag = false; 18 | 19 | for (var v = 0; v < agents.length; v++) { 20 | if (userAgentInfo.indexOf(agents[v].toLowerCase()) > 0) { 21 | flag = true; 22 | break; 23 | } 24 | } 25 | 26 | return flag; 27 | }(); 28 | function isArray(input) { 29 | if (Array.prototype.isArray) { 30 | return Array.isArray(input); 31 | } 32 | 33 | return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]'; 34 | } 35 | function isDiff(a, b) { 36 | if (Object.prototype.toString.call(a) !== Object.prototype.toString.call(b)) { 37 | return true; 38 | } else if (isArray(a) && a.length === b.length) { 39 | return a.some(function (v, i) { 40 | return v !== b[i]; 41 | }); 42 | } 43 | 44 | return a !== b; 45 | } 46 | var elementStyle = document.createElement('div').style; 47 | 48 | var vendor = function () { 49 | var transformNames = { 50 | webkit: 'webkitTransform', 51 | Moz: 'MozTransform', 52 | O: 'OTransform', 53 | ms: 'msTransform', 54 | standard: 'transform' 55 | }; 56 | 57 | for (var key in transformNames) { 58 | if (elementStyle[transformNames[key]] !== undefined) { 59 | return key; 60 | } 61 | } 62 | 63 | return false; 64 | }(); 65 | 66 | function prefixStyle(style) { 67 | if (vendor === false) { 68 | return false; 69 | } 70 | 71 | if (vendor === 'standard') { 72 | if (style === 'transitionEnd') { 73 | return 'transitionend'; 74 | } 75 | 76 | return style; 77 | } 78 | 79 | return vendor + style.charAt(0).toUpperCase() + style.substr(1); 80 | } 81 | function addEvent(el, type, fn, capture) { 82 | el.addEventListener(type, fn, { 83 | passive: false, 84 | capture: !!capture 85 | }); 86 | } 87 | function removeEvent(el, type, fn, capture) { 88 | el.removeEventListener(type, fn, { 89 | passive: false, 90 | capture: !!capture 91 | }); 92 | } 93 | 94 | var transform = prefixStyle('transform'); 95 | var transitionDuration = prefixStyle('transitionDuration'); 96 | var transitionEnd = prefixStyle('transitionEnd'); 97 | var EVENT_TOUCH_START = 'touchstart'; 98 | var EVENT_TOUCH_MOVE = 'touchmove'; 99 | var EVENT_TOUCH_END = 'touchend'; 100 | var EVENT_TOUCH_CANCEL = 'touchcancel'; 101 | var EVENT_MOUSE_DOWN = 'mousedown'; 102 | var EVENT_MOUSE_MOVE = 'mousemove'; 103 | var EVENT_MOUSE_UP = 'mouseup'; 104 | var EVENT_MOUSE_LEAVE = 'mouseleave'; 105 | var EVENT_KEY_DOWN = 'keydown'; 106 | var EVENT_KEY_UP = 'keyup'; 107 | var EVENT_RESIZE = 'resize'; 108 | var Slider = { 109 | name: 'vue-range-slider', 110 | props: { 111 | // 是否显示组件 112 | show: { 113 | type: Boolean, 114 | default: true 115 | }, 116 | // 值 117 | value: { 118 | type: [String, Number, Array, Object], 119 | default: 0 120 | }, 121 | // 最小值 122 | min: { 123 | type: Number, 124 | default: 0 125 | }, 126 | // 最大值 127 | max: { 128 | type: Number, 129 | default: 100 130 | }, 131 | // 分段间隔 132 | step: { 133 | type: Number, 134 | default: 1 135 | }, 136 | // 组件宽度 137 | width: { 138 | type: [Number, String], 139 | default: 'auto' 140 | }, 141 | // 组件高度 142 | height: { 143 | type: [Number, String], 144 | default: 6 145 | }, 146 | // 滑块大小 147 | dotSize: { 148 | type: Number, 149 | default: 16 150 | }, 151 | dotWidth: { 152 | type: Number, 153 | required: false 154 | }, 155 | dotHeight: { 156 | type: Number, 157 | required: false 158 | }, 159 | stopPropagation: { 160 | type: Boolean, 161 | default: false 162 | }, 163 | // 事件类型 164 | eventType: { 165 | type: String, 166 | default: 'auto' 167 | }, 168 | // 是否实时计算组件布局 169 | realTime: { 170 | type: Boolean, 171 | default: false 172 | }, 173 | // 是否显示工具提示 174 | tooltip: { 175 | type: [String, Boolean], 176 | default: 'always', 177 | validator: function validator(val) { 178 | return ['hover', 'always'].indexOf(val) > -1; 179 | } 180 | }, 181 | // 组件方向 182 | direction: { 183 | type: String, 184 | default: 'horizontal', 185 | validator: function validator(val) { 186 | return ['horizontal', 'vertical'].indexOf(val) > -1; 187 | } 188 | }, 189 | // 是否反向组件 190 | reverse: { 191 | type: Boolean, 192 | default: false 193 | }, 194 | // 是否不可用 195 | disabled: { 196 | type: [Boolean, Array], 197 | default: false 198 | }, 199 | piecewiseLabel: { 200 | type: Boolean, 201 | default: false 202 | }, 203 | piecewise: { 204 | type: Boolean, 205 | default: false 206 | }, 207 | // 进度条是否可拖拽（只限范围模式） 208 | processDraggable: { 209 | type: Boolean, 210 | default: false 211 | }, 212 | // 是否可点击的 213 | clickable: { 214 | type: Boolean, 215 | default: true 216 | }, 217 | // 是否固定距离 218 | fixed: { 219 | type: Boolean, 220 | default: false 221 | }, 222 | // 是否为开发环境（打印错误） 223 | debug: { 224 | type: Boolean, 225 | default: true 226 | }, 227 | // 最小范围 228 | minRange: { 229 | type: Number 230 | }, 231 | // 最大范围 232 | maxRange: { 233 | type: Number 234 | }, 235 | tooltipMerge: { 236 | type: Boolean, 237 | default: true 238 | }, 239 | // 是否开启初始动画 240 | startAnimation: { 241 | type: Boolean, 242 | default: false 243 | }, 244 | // 是否在拖拽结束后同步值 245 | lazy: { 246 | type: Boolean, 247 | default: false 248 | }, 249 | // 在范围模式中，是否允许交叉 250 | enableCross: { 251 | type: Boolean, 252 | default: true 253 | }, 254 | // 动画速度比 255 | speed: { 256 | type: Number, 257 | default: 0.5 258 | }, 259 | useKeyboard: { 260 | type: Boolean, 261 | default: false 262 | }, 263 | actionsKeyboard: { 264 | type: Array, 265 | default: function _default() { 266 | return [function (i) { 267 | return i - 1; 268 | }, function (i) { 269 | return i + 1; 270 | }]; 271 | } 272 | }, 273 | data: Array, 274 | formatter: [String, Function], 275 | mergeFormatter: [String, Function], 276 | // 工具提示方向 277 | tooltipDir: [Array, String], 278 | // 工具提示样式 279 | tooltipStyle: [Array, Object, Function], 280 | // 滑块样式 281 | sliderStyle: [Array, Object, Function], 282 | // 键盘控制时，算滑块获得焦点时样式 283 | focusStyle: [Array, Object, Function], 284 | // 组件禁用状态下样式 285 | disabledStyle: Object, 286 | // 进度条样式 287 | processStyle: Object, 288 | // 组件背景样式 289 | bgStyle: Object, 290 | piecewiseStyle: Object, 291 | piecewiseActiveStyle: Object, 292 | disabledDotStyle: [Array, Object, Function], 293 | labelStyle: Object, 294 | labelActiveStyle: Object 295 | }, 296 | data: function data() { 297 | return { 298 | currentValue: 0, 299 | size: 0, 300 | fixedValue: 0, 301 | focusSlider: 0, 302 | currentSlider: 0, 303 | flag: false, 304 | processFlag: false, 305 | processSign: false, 306 | keydownFlag: false, 307 | focusFlag: false, 308 | dragFlag: false, 309 | crossFlag: false, 310 | isComponentExists: true, 311 | isMounted: false 312 | }; 313 | }, 314 | render: function render(h) { 315 | var _this = this; 316 | 317 | var sliderConBlocks = []; // dot 318 | 319 | if (this.isRange) { 320 | var dot0 = h('div', { 321 | ref: 'dot0', 322 | staticClass: 'slider-dot', 323 | class: [this.tooltipStatus, { 324 | 'slider-dot-focus': this.focusFlag && this.focusSlider === 0, 325 | 'slider-dot-dragging': this.flag && this.currentSlider === 0, 326 | 'slider-dot-disabled': !this.boolDisabled && this.disabledArray[0] 327 | }], 328 | style: this.dotStyles 329 | }, [this._t('dot', [h('div', { 330 | staticClass: 'slider-dot-handle', 331 | style: [!this.boolDisabled && this.disabledArray[0] ? this.disabledDotStyles[0] : null, this.sliderStyles[0], this.focusFlag && this.focusSlider === 0 ? this.focusStyles[0] : null] 332 | })], { 333 | index: 0, 334 | value: this.val[0], 335 | disabled: this.disabledArray[0] 336 | }), h('div', { 337 | ref: 'tooltip0', 338 | staticClass: 'slider-tooltip-wrap', 339 | class: "slider-tooltip-".concat(this.tooltipDirection[0]) 340 | }, [this._t('tooltip', [h('span', { 341 | staticClass: 'slider-tooltip', 342 | style: this.tooltipStyles[0] 343 | }, this.formatter ? this.formatting(this.val[0]) : this.val[0])], { 344 | value: this.val[0], 345 | index: 0, 346 | disabled: !this.boolDisabled && this.disabledArray[0] 347 | })])]); 348 | sliderConBlocks.push(dot0); 349 | var dot1 = h('div', { 350 | ref: 'dot1', 351 | staticClass: 'slider-dot', 352 | class: [this.tooltipStatus, { 353 | 'slider-dot-focus': this.focusFlag && this.focusSlider === 1, 354 | 'slider-dot-dragging': this.flag && this.currentSlider === 1, 355 | 'slider-dot-disabled': !this.boolDisabled && this.disabledArray[1] 356 | }], 357 | style: this.dotStyles 358 | }, [this._t('dot', [h('div', { 359 | staticClass: 'slider-dot-handle', 360 | style: [!this.boolDisabled && this.disabledArray[1] ? this.disabledDotStyles[1] : null, this.sliderStyles[1], this.focusFlag && this.focusSlider === 1 ? this.focusStyles[1] : null] 361 | })], { 362 | index: 1, 363 | value: this.val[1], 364 | disabled: this.disabledArray[1] 365 | }), h('div', { 366 | ref: 'tooltip1', 367 | staticClass: 'slider-tooltip-wrap', 368 | class: "slider-tooltip-".concat(this.tooltipDirection[1]) 369 | }, [this._t('tooltip', [h('span', { 370 | staticClass: 'slider-tooltip', 371 | style: this.tooltipStyles[1] 372 | }, this.formatter ? this.formatting(this.val[1]) : this.val[1])], { 373 | value: this.val[1], 374 | index: 1, 375 | disabled: !this.boolDisabled && this.disabledArray[1] 376 | })])]); 377 | sliderConBlocks.push(dot1); 378 | } else { 379 | var dot = h('div', { 380 | ref: 'dot', 381 | staticClass: 'slider-dot', 382 | class: [this.tooltipStatus, { 383 | 'slider-dot-focus': this.focusFlag && this.focusSlider === 0, 384 | 'slider-dot-dragging': this.flag && this.currentSlider === 0 385 | }], 386 | style: this.dotStyles 387 | }, [this._t('dot', [h('div', { 388 | staticClass: 'slider-dot-handle', 389 | style: [this.sliderStyles, this.focusFlag && this.focusSlider === 0 ? this.focusStyles : null] 390 | })], { 391 | value: this.val, 392 | disabled: this.boolDisabled 393 | }), h('div', { 394 | staticClass: 'slider-tooltip-wrap', 395 | class: "slider-tooltip-".concat(this.tooltipDirection) 396 | }, [this._t('tooltip', [h('span', { 397 | staticClass: 'slider-tooltip', 398 | style: this.tooltipStyles 399 | }, this.formatter ? this.formatting(this.val) : this.val)], { 400 | value: this.val 401 | })])]); 402 | sliderConBlocks.push(dot); 403 | } // piecewise 404 | 405 | 406 | var dotWrapLen = this.piecewiseDotWrap.length; 407 | var ulBlock = h('ul', { 408 | staticClass: 'slider-piecewise' 409 | }, this._l(this.piecewiseDotWrap, function (item, i) { 410 | var piecewiseDot = []; 411 | 412 | if (_this.piecewise) { 413 | piecewiseDot.push(h('span', { 414 | staticClass: 'piecewise-dot', 415 | style: [_this.piecewiseStyle, item.inRange ? _this.piecewiseActiveStyle : null] 416 | })); 417 | } 418 | 419 | var piecewiseLabel = []; 420 | 421 | if (_this.piecewiseLabel) { 422 | piecewiseLabel.push(h('span', { 423 | staticClass: 'piecewise-label', 424 | style: [_this.labelStyle, item.inRange ? _this.labelActiveStyle : null] 425 | }, item.label)); 426 | } 427 | 428 | return h('li', { 429 | key: i, 430 | staticClass: 'piecewise-item', 431 | style: [_this.piecewiseDotStyle, item.style] 432 | }, [_this._t('piecewise', piecewiseDot, { 433 | label: item.label, 434 | index: i, 435 | first: i === 0, 436 | last: i === dotWrapLen - 1, 437 | active: item.inRange 438 | }), _this._t('label', piecewiseLabel, { 439 | label: item.label, 440 | index: i, 441 | first: i === 0, 442 | last: i === dotWrapLen - 1, 443 | active: item.inRange 444 | })]); 445 | })); 446 | sliderConBlocks.push(ulBlock); // process 447 | 448 | var processBlock = h('div', { 449 | ref: 'process', 450 | staticClass: 'slider-process', 451 | class: { 452 | 'slider-process-draggable': this.isRange && this.processDraggable 453 | }, 454 | style: this.processStyle, 455 | on: { 456 | click: function click(e) { 457 | return _this.processClick(e); 458 | } 459 | } 460 | }, [h('div', { 461 | ref: 'mergedTooltip', 462 | staticClass: 'merged-tooltip slider-tooltip-wrap', 463 | class: "slider-tooltip-".concat(this.isRange ? this.tooltipDirection[0] : this.tooltipDirection), 464 | style: this.tooltipMergedPosition 465 | }, [this._t('tooltip', [h('span', { 466 | staticClass: 'slider-tooltip', 467 | style: this.tooltipStyles 468 | }, this.mergeFormatter ? this.mergeFormatting(this.val[0], this.val[1]) : this.formatter ? this.val[0] === this.val[1] ? this.formatting(this.val[0]) : "".concat(this.formatting(this.val[0]), " - ").concat(this.formatting(this.val[1])) : this.val[0] === this.val[1] ? this.val[0] : "".concat(this.val[0], " - ").concat(this.val[1]))], { 469 | value: this.val, 470 | merge: true 471 | })])]); 472 | sliderConBlocks.push(processBlock); // 473 | 474 | if (!this.isRange && !this.data) { 475 | sliderConBlocks.push(h('input', { 476 | staticClass: 'slider-input', 477 | attrs: { 478 | type: 'range', 479 | min: this.min, 480 | max: this.max 481 | }, 482 | domProps: { 483 | value: this.val 484 | }, 485 | on: { 486 | input: function input(e) { 487 | return _this.val = e.target.value; 488 | } 489 | } 490 | })); 491 | } 492 | 493 | return h('div', { 494 | ref: 'wrap', 495 | staticClass: 'vue-range-slider slider-component', 496 | class: [this.flowDirection, this.disabledClass, this.stateClass, { 497 | 'slider-has-label': this.piecewiseLabel 498 | }], 499 | style: [this.wrapStyles, this.boolDisabled ? this.disabledStyle : null], 500 | directives: [{ 501 | name: 'show', 502 | value: this.show 503 | }], 504 | on: { 505 | click: function click(e) { 506 | return _this.wrapClick(e); 507 | } 508 | } 509 | }, [h('div', { 510 | ref: 'elem', 511 | staticClass: 'slider', 512 | style: [this.elemStyles, this.bgStyle], 513 | attrs: { 514 | 'aria-hidden': true 515 | } 516 | }, sliderConBlocks)]); 517 | }, 518 | computed: { 519 | val: { 520 | get: function get() { 521 | return this.data ? this.isRange ? [this.data[this.currentValue[0]], this.data[this.currentValue[1]]] : this.data[this.currentValue] : this.currentValue; 522 | }, 523 | set: function set(val) { 524 | if (this.data) { 525 | if (this.isRange) { 526 | var index0 = this.data.indexOf(val[0]); 527 | var index1 = this.data.indexOf(val[1]); 528 | 529 | if (index0 > -1 && index1 > -1) { 530 | this.currentValue = [index0, index1]; 531 | } 532 | } else { 533 | var index = this.data.indexOf(val); 534 | 535 | if (index > -1) { 536 | this.currentValue = index; 537 | } 538 | } 539 | } else { 540 | this.currentValue = val; 541 | } 542 | } 543 | }, 544 | currentIndex: function currentIndex() { 545 | if (this.isRange) { 546 | return this.data ? this.currentValue : [this.getIndexByValue(this.currentValue[0]), this.getIndexByValue(this.currentValue[1])]; 547 | } else { 548 | return this.getIndexByValue(this.currentValue); 549 | } 550 | }, 551 | tooltipMergedPosition: function tooltipMergedPosition() { 552 | if (!this.isMounted) return {}; 553 | var tooltipDirection = this.tooltipDirection[0]; 554 | var dot0 = this.$refs.dot0; 555 | 556 | if (dot0) { 557 | var style = {}; 558 | 559 | if (this.direction === 'vertical') { 560 | style[tooltipDirection] = "-".concat(this.dotHeightVal / 2 - this.width / 2 + 9, "px"); 561 | } else { 562 | style[tooltipDirection] = "-".concat(this.dotWidthVal / 2 - this.height / 2 + 9, "px"); 563 | style['left'] = "50%"; 564 | } 565 | 566 | return style; 567 | } 568 | }, 569 | tooltipDirection: function tooltipDirection() { 570 | var dir = this.tooltipDir || (this.direction === 'vertical' ? 'left' : 'top'); 571 | 572 | if (isArray(dir)) { 573 | return this.isRange ? dir : dir[1]; 574 | } else { 575 | return this.isRange ? [dir, dir] : dir; 576 | } 577 | }, 578 | piecewiseDotWrap: function piecewiseDotWrap() { 579 | if (!this.piecewise && !this.piecewiseLabel) { 580 | return false; 581 | } 582 | 583 | var arr = []; 584 | 585 | for (var i = 0; i <= this.total; i++) { 586 | var style = this.direction === 'vertical' ? { 587 | bottom: "".concat(this.gap * i - this.width / 2, "px"), 588 | left: 0 589 | } : { 590 | left: "".concat(this.gap * i - this.height / 2, "px"), 591 | top: 0 592 | }; 593 | var index = this.reverse ? this.total - i : i; 594 | var label = this.data ? this.data[index] : this.spacing * index + this.min; 595 | arr.push({ 596 | style: style, 597 | label: this.formatter ? this.formatting(label) : label, 598 | inRange: index >= this.indexRange[0] && index <= this.indexRange[1] 599 | }); 600 | } 601 | 602 | return arr; 603 | }, 604 | total: function total() { 605 | if (this.data) { 606 | return this.data.length - 1; 607 | } else if (Math.floor((this.maximum - this.minimum) * this.multiple) % (this.step * this.multiple) !== 0) { 608 | this.printError('Prop[step] is illegal, Please make sure that the step can be divisible'); 609 | } 610 | 611 | return (this.maximum - this.minimum) / this.step; 612 | }, 613 | piecewiseDotStyle: function piecewiseDotStyle() { 614 | return this.direction === 'vertical' ? { 615 | width: "".concat(this.width, "px"), 616 | height: "".concat(this.width, "px") 617 | } : { 618 | width: "".concat(this.height, "px"), 619 | height: "".concat(this.height, "px") 620 | }; 621 | }, 622 | dotStyles: function dotStyles() { 623 | return this.direction === 'vertical' ? { 624 | width: "".concat(this.dotWidthVal, "px"), 625 | height: "".concat(this.dotHeightVal, "px"), 626 | left: "".concat(-(this.dotWidthVal - this.width) / 2, "px") 627 | } : { 628 | width: "".concat(this.dotWidthVal, "px"), 629 | height: "".concat(this.dotHeightVal, "px"), 630 | top: "".concat(-(this.dotHeightVal - this.height) / 2, "px") 631 | }; 632 | }, 633 | sliderStyles: function sliderStyles() { 634 | if (isArray(this.sliderStyle)) { 635 | return this.isRange ? this.sliderStyle : this.sliderStyle[1]; 636 | } else if (typeof this.sliderStyle === 'function') { 637 | return this.sliderStyle(this.val, this.currentIndex); 638 | } else { 639 | return this.isRange ? [this.sliderStyle, this.sliderStyle] : this.sliderStyle; 640 | } 641 | }, 642 | tooltipStyles: function tooltipStyles() { 643 | if (isArray(this.tooltipStyle)) { 644 | return this.isRange ? this.tooltipStyle : this.tooltipStyle[1]; 645 | } else if (typeof this.tooltipStyle === 'function') { 646 | return this.tooltipStyle(this.val, this.currentIndex); 647 | } else { 648 | return this.isRange ? [this.tooltipStyle, this.tooltipStyle] : this.tooltipStyle; 649 | } 650 | }, 651 | focusStyles: function focusStyles() { 652 | if (isArray(this.focusStyle)) { 653 | return this.isRange ? this.focusStyle : this.focusStyle[1]; 654 | } else if (typeof this.focusStyle === 'function') { 655 | return this.focusStyle(this.val, this.currentIndex); 656 | } else { 657 | return this.isRange ? [this.focusStyle, this.focusStyle] : this.focusStyle; 658 | } 659 | }, 660 | disabledDotStyles: function disabledDotStyles() { 661 | var disabledStyle = this.disabledDotStyle; 662 | 663 | if (isArray(disabledStyle)) { 664 | return disabledStyle; 665 | } else if (typeof disabledStyle === 'function') { 666 | var style = disabledStyle(this.val, this.currentIndex); 667 | return isArray(style) ? style : [style, style]; 668 | } else if (disabledStyle) { 669 | return [disabledStyle, disabledStyle]; 670 | } else { 671 | return [{ 672 | backgroundColor: '#ccc' 673 | }, { 674 | backgroundColor: '#ccc' 675 | }]; 676 | } 677 | }, 678 | elemStyles: function elemStyles() { 679 | return this.direction === 'vertical' ? { 680 | width: "".concat(this.width, "px"), 681 | height: '100%' 682 | } : { 683 | height: "".concat(this.height, "px") 684 | }; 685 | }, 686 | wrapStyles: function wrapStyles() { 687 | return this.direction === 'vertical' ? { 688 | height: typeof this.height === 'number' ? "".concat(this.height, "px") : this.height, 689 | padding: "".concat(this.dotHeightVal / 2, "px ").concat(this.dotWidthVal / 2, "px") 690 | } : { 691 | width: typeof this.width === 'number' ? "".concat(this.width, "px") : this.width, 692 | padding: "".concat(this.dotHeightVal / 2, "px ").concat(this.dotWidthVal / 2, "px") 693 | }; 694 | }, 695 | stateClass: function stateClass() { 696 | return { 697 | 'slider-state-process-drag': this.processFlag, 698 | 'slider-state-drag': this.flag && !this.processFlag && !this.keydownFlag, 699 | 'slider-state-focus': this.focusFlag 700 | }; 701 | }, 702 | tooltipStatus: function tooltipStatus() { 703 | return this.tooltip === 'hover' && this.flag ? 'slider-always' : this.tooltip ? "slider-".concat(this.tooltip) : ''; 704 | }, 705 | tooltipClass: function tooltipClass() { 706 | return ["slider-tooltip-".concat(this.tooltipDirection), 'slider-tooltip']; 707 | }, 708 | minimum: function minimum() { 709 | return this.data ? 0 : this.min; 710 | }, 711 | maximum: function maximum() { 712 | return this.data ? this.data.length - 1 : this.max; 713 | }, 714 | multiple: function multiple() { 715 | var decimals = "".concat(this.step).split('.')[1]; 716 | return decimals ? Math.pow(10, decimals.length) : 1; 717 | }, 718 | indexRange: function indexRange() { 719 | return this.isRange ? this.currentIndex : [0, this.currentIndex]; 720 | }, 721 | spacing: function spacing() { 722 | return this.data ? 1 : this.step; 723 | }, 724 | gap: function gap() { 725 | return this.size / this.total; 726 | }, 727 | dotWidthVal: function dotWidthVal() { 728 | return typeof this.dotWidth === 'number' ? this.dotWidth : this.dotSize; 729 | }, 730 | dotHeightVal: function dotHeightVal() { 731 | return typeof this.dotHeight === 'number' ? this.dotHeight : this.dotSize; 732 | }, 733 | disabledArray: function disabledArray() { 734 | return isArray(this.disabled) ? this.disabled : [this.disabled, this.disabled]; 735 | }, 736 | boolDisabled: function boolDisabled() { 737 | return this.disabledArray.every(function (b) { 738 | return b === true; 739 | }); 740 | }, 741 | disabledClass: function disabledClass() { 742 | return this.boolDisabled ? 'slider-disabled' : ''; 743 | }, 744 | flowDirection: function flowDirection() { 745 | return "slider-".concat(this.direction + (this.reverse ? '-reverse' : '')); 746 | }, 747 | isRange: function isRange() { 748 | return isArray(this.value); 749 | }, 750 | isDisabled: function isDisabled() { 751 | return this.eventType === 'none' ? true : this.boolDisabled; 752 | }, 753 | isFixed: function isFixed() { 754 | return this.fixed || this.minRange; 755 | }, 756 | position: function position() { 757 | return this.isRange ? [(this.currentValue[0] - this.minimum) / this.spacing * this.gap, (this.currentValue[1] - this.minimum) / this.spacing * this.gap] : (this.currentValue - this.minimum) / this.spacing * this.gap; 758 | }, 759 | limit: function limit() { 760 | return this.isRange ? this.isFixed ? [[0, (this.total - this.fixedValue) * this.gap], [this.fixedValue * this.gap, this.size]] : [[0, this.position[1]], [this.position[0], this.size]] : [0, this.size]; 761 | }, 762 | valueLimit: function valueLimit() { 763 | return this.isRange ? this.isFixed ? [[this.minimum, this.maximum - this.fixedValue * (this.spacing * this.multiple) / this.multiple], [this.minimum + this.fixedValue * (this.spacing * this.multiple) / this.multiple, this.maximum]] : [[this.minimum, this.currentValue[1]], [this.currentValue[0], this.maximum]] : [this.minimum, this.maximum]; 764 | }, 765 | idleSlider: function idleSlider() { 766 | return this.currentSlider === 0 ? 1 : 0; 767 | }, 768 | slider: function slider() { 769 | return this.isRange ? [this.$refs.dot0, this.$refs.dot1] : this.$refs.dot; 770 | } 771 | }, 772 | methods: { 773 | setValue: function setValue(val, noCb, speed) { 774 | var _this2 = this; 775 | 776 | if (isDiff(this.val, val)) { 777 | var resetVal = this.limitValue(val); 778 | this.val = this.isRange ? resetVal.concat() : resetVal; 779 | this.computedFixedValue(); 780 | this.syncValue(noCb); 781 | } 782 | 783 | this.$nextTick(function () { 784 | return _this2.setPosition(speed); 785 | }); 786 | }, 787 | setIndex: function setIndex(val) { 788 | if (isArray(val) && this.isRange) { 789 | var value; 790 | 791 | if (this.data) { 792 | value = [this.data[val[0]], this.data[val[1]]]; 793 | } else { 794 | value = [this.getValueByIndex(val[0]), this.getValueByIndex(val[1])]; 795 | } 796 | 797 | this.setValue(value); 798 | } else { 799 | val = this.getValueByIndex(val); 800 | 801 | if (this.isRange) { 802 | this.currentSlider = val > (this.currentValue[1] - this.currentValue[0]) / 2 + this.currentValue[0] ? 1 : 0; 803 | } 804 | 805 | this.setCurrentValue(val); 806 | } 807 | }, 808 | wrapClick: function wrapClick(e) { 809 | if (this.isDisabled || !this.clickable || this.processFlag || this.dragFlag) return false; 810 | var pos = this.getPos(e); 811 | 812 | if (this.isRange) { 813 | if (this.disabledArray.every(function (b) { 814 | return b === false; 815 | })) { 816 | this.currentSlider = pos > (this.position[1] - this.position[0]) / 2 + this.position[0] ? 1 : 0; 817 | } else if (this.disabledArray[0]) { 818 | if (pos < this.position[0]) return false; 819 | this.currentSlider = 1; 820 | } else if (this.disabledArray[1]) { 821 | if (pos > this.position[1]) return false; 822 | this.currentSlider = 0; 823 | } 824 | } 825 | 826 | if (this.disabledArray[this.currentSlider]) { 827 | return false; 828 | } 829 | 830 | this.setValueOnPos(pos); 831 | 832 | if (this.isRange && this.tooltipMerge) { 833 | var timer = setInterval(this.handleOverlapTooltip, 16.7); 834 | setTimeout(function () { 835 | return window.clearInterval(timer); 836 | }, this.speed * 1000); 837 | } 838 | }, 839 | processClick: function processClick(e) { 840 | if (this.fixed) e.stopPropagation(); 841 | }, 842 | syncValue: function syncValue(noCb) { 843 | var val = this.isRange ? this.val.concat() : this.val; 844 | this.$emit('input', val); 845 | this.keydownFlag && this.$emit('on-keypress', val); 846 | noCb || this.$emit('slide-end', val); 847 | }, 848 | getPos: function getPos(e) { 849 | this.realTime && this.getStaticData(); 850 | return this.direction === 'vertical' ? this.reverse ? e.pageY - this.offset : this.size - (e.pageY - this.offset) : this.reverse ? this.size - (e.pageX - this.offset) : e.pageX - this.offset; 851 | }, 852 | setValueOnPos: function setValueOnPos(pos, isDrag) { 853 | var range = this.isRange ? this.limit[this.currentSlider] : this.limit; 854 | var valueRange = this.isRange ? this.valueLimit[this.currentSlider] : this.valueLimit; 855 | var index = Math.round(pos / this.gap); 856 | 857 | if (pos >= range[0] && pos <= range[1]) { 858 | var v = this.getValueByIndex(index); 859 | this.setTransform(pos); 860 | this.setCurrentValue(v, isDrag); 861 | 862 | if (this.isRange && (this.fixed || this.isLessRange(pos, index))) { 863 | this.setTransform(pos + this.fixedValue * this.gap * (this.currentSlider === 0 ? 1 : -1), true); 864 | this.setCurrentValue((v * this.multiple + this.fixedValue * this.spacing * this.multiple * (this.currentSlider === 0 ? 1 : -1)) / this.multiple, isDrag, true); 865 | } 866 | } else { 867 | var anotherSlider = pos < range[0] ? 0 : 1; 868 | var currentSlider = anotherSlider === 0 ? 1 : 0; 869 | this.setTransform(range[anotherSlider]); 870 | this.setCurrentValue(valueRange[anotherSlider]); 871 | 872 | if (this.isRange && (this.fixed || this.isLessRange(pos, index))) { 873 | this.setTransform(this.limit[this.idleSlider][anotherSlider], true); 874 | this.setCurrentValue(this.valueLimit[this.idleSlider][anotherSlider], isDrag, true); 875 | } else if (this.isRange && (this.enableCross || this.crossFlag) && !this.isFixed && !this.disabledArray[anotherSlider] && this.currentSlider === currentSlider) { 876 | this.focusSlider = anotherSlider; 877 | this.currentSlider = anotherSlider; 878 | } 879 | } 880 | 881 | this.crossFlag = false; 882 | }, 883 | setCurrentValue: function setCurrentValue(val, isDrag, isIdleSlider) { 884 | var slider = isIdleSlider ? this.idleSlider : this.currentSlider; 885 | if (val < this.minimum || val > this.maximum) return false; 886 | 887 | if (this.isRange) { 888 | if (isDiff(this.currentValue[slider], val)) { 889 | this.currentValue.splice(slider, 1, val); 890 | 891 | if (!this.lazy || !this.flag) { 892 | this.syncValue(); 893 | } 894 | } 895 | } else if (isDiff(this.currentValue, val)) { 896 | this.currentValue = val; 897 | 898 | if (!this.lazy || !this.flag) { 899 | this.syncValue(); 900 | } 901 | } 902 | 903 | isDrag || this.setPosition(); 904 | }, 905 | setPosition: function setPosition(speed) { 906 | this.flag || this.setTransitionTime(speed === undefined ? this.speed : speed); 907 | 908 | if (this.isRange) { 909 | this.setTransform(this.position[0], this.currentSlider === 1); 910 | this.setTransform(this.position[1], this.currentSlider === 0); 911 | } else { 912 | this.setTransform(this.position); 913 | } 914 | 915 | this.flag || this.setTransitionTime(0); 916 | }, 917 | setTransform: function setTransform(val, isIdleSlider) { 918 | var slider = isIdleSlider ? this.idleSlider : this.currentSlider; 919 | var value = roundToDPR((this.direction === 'vertical' ? this.dotHeightVal / 2 - val : val - this.dotWidthVal / 2) * (this.reverse ? -1 : 1)); 920 | var translateValue = this.direction === 'vertical' ? "translateY(".concat(value, "px)") : "translateX(".concat(value, "px)"); 921 | var processSize = this.fixed ? "".concat(this.fixedValue * this.gap, "px") : "".concat(slider === 0 ? this.position[1] - val : val - this.position[0], "px"); 922 | var processPos = this.fixed ? "".concat(slider === 0 ? val : val - this.fixedValue * this.gap, "px") : "".concat(slider === 0 ? val : this.position[0], "px"); 923 | 924 | if (this.isRange) { 925 | this.slider[slider].style[transform] = translateValue; 926 | 927 | if (this.direction === 'vertical') { 928 | this.$refs.process.style.height = processSize; 929 | this.$refs.process.style[this.reverse ? 'top' : 'bottom'] = processPos; 930 | } else { 931 | this.$refs.process.style.width = processSize; 932 | this.$refs.process.style[this.reverse ? 'right' : 'left'] = processPos; 933 | } 934 | } else { 935 | this.slider.style[transform] = translateValue; 936 | 937 | if (this.direction === 'vertical') { 938 | this.$refs.process.style.height = "".concat(val, "px"); 939 | this.$refs.process.style[this.reverse ? 'top' : 'bottom'] = 0; 940 | } else { 941 | this.$refs.process.style.width = "".concat(val, "px"); 942 | this.$refs.process.style[this.reverse ? 'right' : 'left'] = 0; 943 | } 944 | } 945 | }, 946 | setTransitionTime: function setTransitionTime(time) { 947 | // In order to avoid browser merge style and modify together 948 | time || this.$refs.process.offsetWidth; 949 | 950 | if (this.isRange) { 951 | var sliderLen = this.slider.length; 952 | 953 | for (var i = 0; i < sliderLen; i++) { 954 | this.slider[i].style[transitionDuration] = "".concat(time, "s"); 955 | } 956 | 957 | this.$refs.process.style[transitionDuration] = "".concat(time, "s"); 958 | } else { 959 | this.slider.style[transitionDuration] = "".concat(time, "s"); 960 | this.$refs.process.style[transitionDuration] = "".concat(time, "s"); 961 | } 962 | }, 963 | computedFixedValue: function computedFixedValue() { 964 | if (!this.isFixed) { 965 | this.fixedValue = 0; 966 | return false; 967 | } 968 | 969 | this.fixedValue = this.currentIndex[1] - this.currentIndex[0]; 970 | this.fixedValue = Math.max(this.fixed ? this.currentIndex[1] - this.currentIndex[0] : 0, this.minRange || 0); 971 | }, 972 | limitValue: function limitValue(val) { 973 | var _this3 = this; 974 | 975 | if (this.data) { 976 | return val; 977 | } 978 | 979 | var inRange = function inRange(v) { 980 | if (v < _this3.min) { 981 | _this3.printError("The value of the slider is ".concat(val, ", the minimum value is ").concat(_this3.min, ", the value of this slider can not be less than the minimum value")); 982 | 983 | return _this3.min; 984 | } else if (v > _this3.max) { 985 | _this3.printError("The value of the slider is ".concat(val, ", the maximum value is ").concat(_this3.max, ", the value of this slider can not be greater than the maximum value")); 986 | 987 | return _this3.max; 988 | } 989 | 990 | return v; 991 | }; 992 | 993 | if (this.isRange) { 994 | return val.map(function (v) { 995 | return inRange(v); 996 | }); 997 | } else { 998 | return inRange(val); 999 | } 1000 | }, 1001 | getStaticData: function getStaticData() { 1002 | if (this.$refs.elem) { 1003 | this.size = this.direction === 'vertical' ? this.$refs.elem.offsetHeight : this.$refs.elem.offsetWidth; 1004 | this.offset = this.direction === 'vertical' ? this.$refs.elem.getBoundingClientRect().top + window.pageYOffset || document.documentElement.scrollTop : this.$refs.elem.getBoundingClientRect().left; 1005 | } 1006 | }, 1007 | handleOverlapTooltip: function handleOverlapTooltip() { 1008 | var isDirectionSame = this.tooltipDirection[0] === this.tooltipDirection[1]; 1009 | 1010 | if (this.isRange && isDirectionSame) { 1011 | var tooltip0 = this.reverse ? this.$refs.tooltip1 : this.$refs.tooltip0; 1012 | var tooltip1 = this.reverse ? this.$refs.tooltip0 : this.$refs.tooltip1; 1013 | var tooltip0Rect = tooltip0.getBoundingClientRect(); 1014 | var tooltip1Rect = tooltip1.getBoundingClientRect(); 1015 | var tooltip0Right = tooltip0Rect.right; 1016 | var tooltip1Left = tooltip1Rect.left; 1017 | var tooltip0Y = tooltip0Rect.top; 1018 | var tooltip1Y = tooltip1Rect.top + tooltip1Rect.height; 1019 | var horizontalOverlap = this.direction === 'horizontal' && tooltip0Right > tooltip1Left; 1020 | var verticalOverlap = this.direction === 'vertical' && tooltip1Y > tooltip0Y; 1021 | 1022 | if (horizontalOverlap || verticalOverlap) { 1023 | this.handleDisplayMergedTooltip(true); 1024 | } else { 1025 | this.handleDisplayMergedTooltip(false); 1026 | } 1027 | } 1028 | }, 1029 | handleDisplayMergedTooltip: function handleDisplayMergedTooltip(show) { 1030 | var tooltip0 = this.$refs.tooltip0; 1031 | var tooltip1 = this.$refs.tooltip1; 1032 | var mergedTooltip = this.$refs.process.getElementsByClassName('merged-tooltip')[0]; 1033 | 1034 | if (show) { 1035 | tooltip0.style.visibility = 'hidden'; 1036 | tooltip1.style.visibility = 'hidden'; 1037 | mergedTooltip.style.visibility = 'visible'; 1038 | } else { 1039 | tooltip0.style.visibility = 'visible'; 1040 | tooltip1.style.visibility = 'visible'; 1041 | mergedTooltip.style.visibility = 'hidden'; 1042 | } 1043 | }, 1044 | isLessRange: function isLessRange(pos, index) { 1045 | if (!this.isRange || !this.minRange && !this.maxRange) { 1046 | return false; 1047 | } 1048 | 1049 | var diff = this.currentSlider === 0 ? this.currentIndex[1] - index : index - this.currentIndex[0]; 1050 | 1051 | if (this.minRange && diff <= this.minRange) { 1052 | this.fixedValue = this.minRange; 1053 | return true; 1054 | } 1055 | 1056 | if (this.maxRange && diff >= this.maxRange) { 1057 | this.fixedValue = this.maxRange; 1058 | return true; 1059 | } 1060 | 1061 | this.computedFixedValue(); 1062 | return false; 1063 | }, 1064 | getValueByIndex: function getValueByIndex(index) { 1065 | return (this.spacing * this.multiple * index + this.minimum * this.multiple) / this.multiple; 1066 | }, 1067 | getIndexByValue: function getIndexByValue(value) { 1068 | return Math.round((value - this.minimum) * this.multiple) / (this.spacing * this.multiple); 1069 | }, 1070 | formatting: function formatting(value) { 1071 | return typeof this.formatter === 'string' ? this.formatter.replace(/{value}/, value) : this.formatter(value); 1072 | }, 1073 | mergeFormatting: function mergeFormatting(value1, value2) { 1074 | return typeof this.mergeFormatter === 'string' ? this.mergeFormatter.replace(/{(value1|value2)}/g, function (_, key) { 1075 | return key === 'value1' ? value1 : value2; 1076 | }) : this.mergeFormatter(value1, value2); 1077 | }, 1078 | _start: function _start(e) { 1079 | var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 1080 | var isProcess = arguments.length > 2 ? arguments[2] : undefined; 1081 | 1082 | if (this.disabledArray[index]) { 1083 | return false; 1084 | } 1085 | 1086 | if (this.stopPropagation) { 1087 | e.stopPropagation(); 1088 | } 1089 | 1090 | if (this.isRange) { 1091 | this.currentSlider = index; 1092 | 1093 | if (isProcess) { 1094 | if (!this.processDraggable) { 1095 | return false; 1096 | } 1097 | 1098 | this.processFlag = true; 1099 | this.processSign = { 1100 | pos: this.position, 1101 | start: this.getPos(e.targetTouches && e.targetTouches[0] ? e.targetTouches[0] : e) 1102 | }; 1103 | } 1104 | 1105 | if (!this.enableCross && this.val[0] === this.val[1]) { 1106 | this.crossFlag = true; 1107 | } 1108 | } 1109 | 1110 | if (!isProcess && this.useKeyboard) { 1111 | this.focusFlag = true; 1112 | this.focusSlider = index; 1113 | } 1114 | 1115 | this.flag = true; 1116 | this.$emit('drag-start', this); 1117 | }, 1118 | _move: function _move(e) { 1119 | // e.preventDefault() // NOTE: COMMENTED, BREAKS SELECTING THINGS ON PAGE 1120 | if (this.stopPropagation) { 1121 | e.stopPropagation(); 1122 | } 1123 | 1124 | if (!this.flag) return false; 1125 | if (e.targetTouches && e.targetTouches[0]) e = e.targetTouches[0]; 1126 | 1127 | if (this.processFlag) { 1128 | this.currentSlider = 0; 1129 | this.setValueOnPos(this.processSign.pos[0] + this.getPos(e) - this.processSign.start, true); 1130 | this.currentSlider = 1; 1131 | this.setValueOnPos(this.processSign.pos[1] + this.getPos(e) - this.processSign.start, true); 1132 | } else { 1133 | this.dragFlag = true; 1134 | this.setValueOnPos(this.getPos(e), true); 1135 | } 1136 | 1137 | if (this.isRange && this.tooltipMerge) { 1138 | this.handleOverlapTooltip(); 1139 | } 1140 | }, 1141 | _end: function _end(e) { 1142 | var _this4 = this; 1143 | 1144 | if (this.stopPropagation) { 1145 | e.stopPropagation(); 1146 | } 1147 | 1148 | if (this.flag) { 1149 | this.$emit('drag-end', this); 1150 | 1151 | if (this.lazy && isDiff(this.val, this.value)) { 1152 | this.syncValue(); 1153 | } 1154 | } else { 1155 | return false; 1156 | } 1157 | 1158 | this.flag = false; 1159 | this.$nextTick(function () { 1160 | _this4.crossFlag = false; 1161 | _this4.dragFlag = false; 1162 | _this4.processFlag = false; 1163 | }); 1164 | this.setPosition(); 1165 | }, 1166 | blurSlider: function blurSlider(e) { 1167 | var dot = this.isRange ? this.$refs["dot".concat(this.focusSlider)] : this.$refs.dot; 1168 | 1169 | if (!dot || dot === e.target || dot.contains(e.target)) { 1170 | return false; 1171 | } 1172 | 1173 | this.focusFlag = false; 1174 | }, 1175 | handleKeydown: function handleKeydown(e) { 1176 | if (!this.useKeyboard) { 1177 | return false; 1178 | } 1179 | 1180 | var keyCode = e.which || e.keyCode; 1181 | 1182 | switch (keyCode) { 1183 | case 37: 1184 | case 40: 1185 | e.preventDefault(); // e.stopPropagation() 1186 | 1187 | this.keydownFlag = true; 1188 | this.flag = true; 1189 | this.changeFocusSlider(this.actionsKeyboard[0]); 1190 | break; 1191 | 1192 | case 38: 1193 | case 39: 1194 | e.preventDefault(); // e.stopPropagation() 1195 | 1196 | this.keydownFlag = true; 1197 | this.flag = true; 1198 | this.changeFocusSlider(this.actionsKeyboard[1]); 1199 | break; 1200 | 1201 | default: 1202 | break; 1203 | } 1204 | }, 1205 | handleKeyup: function handleKeyup() { 1206 | if (this.keydownFlag) { 1207 | this.keydownFlag = false; 1208 | this.flag = false; 1209 | } 1210 | }, 1211 | changeFocusSlider: function changeFocusSlider(fn) { 1212 | var _this5 = this; 1213 | 1214 | if (this.isRange) { 1215 | var arr = this.currentIndex.map(function (index, i) { 1216 | if (i === _this5.focusSlider || _this5.fixed) { 1217 | var val = fn(index); 1218 | var range = _this5.fixed ? _this5.valueLimit[i] : [0, _this5.total]; 1219 | 1220 | if (val <= range[1] && val >= range[0]) { 1221 | return val; 1222 | } 1223 | } 1224 | 1225 | return index; 1226 | }); 1227 | 1228 | if (arr[0] > arr[1]) { 1229 | this.focusSlider = this.focusSlider === 0 ? 1 : 0; 1230 | arr = arr.reverse(); 1231 | } 1232 | 1233 | this.setIndex(arr); 1234 | } else { 1235 | this.setIndex(fn(this.currentIndex)); 1236 | } 1237 | }, 1238 | bindEvents: function bindEvents() { 1239 | var me = this; 1240 | 1241 | this.processStartFn = function (e) { 1242 | me._start(e, 0, true); 1243 | }; 1244 | 1245 | this.dot0StartFn = function (e) { 1246 | me._start(e, 0); 1247 | }; 1248 | 1249 | this.dot1StartFn = function (e) { 1250 | me._start(e, 1); 1251 | }; 1252 | 1253 | if (isMobile) { 1254 | addEvent(this.$refs.process, EVENT_TOUCH_START, this.processStartFn); 1255 | addEvent(document, EVENT_TOUCH_MOVE, this._move); 1256 | addEvent(document, EVENT_TOUCH_END, this._end); 1257 | addEvent(document, EVENT_TOUCH_CANCEL, this._end); 1258 | 1259 | if (this.isRange) { 1260 | addEvent(this.$refs.dot0, EVENT_TOUCH_START, this.dot0StartFn); 1261 | addEvent(this.$refs.dot1, EVENT_TOUCH_START, this.dot1StartFn); 1262 | } else { 1263 | addEvent(this.$refs.dot, EVENT_TOUCH_START, this._start); 1264 | } 1265 | } else { 1266 | addEvent(this.$refs.process, EVENT_MOUSE_DOWN, this.processStartFn); 1267 | addEvent(document, EVENT_MOUSE_DOWN, this.blurSlider); 1268 | addEvent(document, EVENT_MOUSE_MOVE, this._move); 1269 | addEvent(document, EVENT_MOUSE_UP, this._end); 1270 | addEvent(document, EVENT_MOUSE_LEAVE, this._end); 1271 | 1272 | if (this.isRange) { 1273 | addEvent(this.$refs.dot0, EVENT_MOUSE_DOWN, this.dot0StartFn); 1274 | addEvent(this.$refs.dot1, EVENT_MOUSE_DOWN, this.dot1StartFn); 1275 | } else { 1276 | addEvent(this.$refs.dot, EVENT_MOUSE_DOWN, this._start); 1277 | } 1278 | } 1279 | 1280 | addEvent(document, EVENT_KEY_DOWN, this.handleKeydown); 1281 | addEvent(document, EVENT_KEY_UP, this.handleKeyup); 1282 | addEvent(window, EVENT_RESIZE, this.refresh); 1283 | 1284 | if (this.isRange && this.tooltipMerge) { 1285 | addEvent(this.$refs.dot0, transitionEnd, this.handleOverlapTooltip); 1286 | addEvent(this.$refs.dot1, transitionEnd, this.handleOverlapTooltip); 1287 | } 1288 | }, 1289 | unbindEvents: function unbindEvents() { 1290 | if (isMobile) { 1291 | removeEvent(this.$refs.process, EVENT_TOUCH_START, this.processStartFn); 1292 | removeEvent(document, EVENT_TOUCH_MOVE, this._move); 1293 | removeEvent(document, EVENT_TOUCH_END, this._end); 1294 | removeEvent(document, EVENT_TOUCH_CANCEL, this._end); 1295 | 1296 | if (this.isRange) { 1297 | removeEvent(this.$refs.dot0, EVENT_TOUCH_START, this.dot0StartFn); 1298 | removeEvent(this.$refs.dot1, EVENT_TOUCH_START, this.dot1StartFn); 1299 | } else { 1300 | removeEvent(this.$refs.dot, EVENT_TOUCH_START, this._start); 1301 | } 1302 | } else { 1303 | removeEvent(this.$refs.process, EVENT_MOUSE_DOWN, this.processStartFn); 1304 | removeEvent(document, EVENT_MOUSE_DOWN, this.blurSlider); 1305 | removeEvent(document, EVENT_MOUSE_MOVE, this._move); 1306 | removeEvent(document, EVENT_MOUSE_UP, this._end); 1307 | removeEvent(document, EVENT_MOUSE_LEAVE, this._end); 1308 | 1309 | if (this.isRange) { 1310 | removeEvent(this.$refs.dot0, EVENT_MOUSE_DOWN, this.dot0StartFn); 1311 | removeEvent(this.$refs.dot1, EVENT_MOUSE_DOWN, this.dot1StartFn); 1312 | } else { 1313 | removeEvent(this.$refs.dot, EVENT_MOUSE_DOWN, this._start); 1314 | } 1315 | } 1316 | 1317 | removeEvent(document, EVENT_KEY_DOWN, this.handleKeydown); 1318 | removeEvent(document, EVENT_KEY_UP, this.handleKeyup); 1319 | removeEvent(window, EVENT_RESIZE, this.refresh); 1320 | 1321 | if (this.isRange && this.tooltipMerge) { 1322 | removeEvent(this.$refs.dot0, transitionEnd, this.handleOverlapTooltip); 1323 | removeEvent(this.$refs.dot1, transitionEnd, this.handleOverlapTooltip); 1324 | } 1325 | }, 1326 | refresh: function refresh() { 1327 | if (this.$refs.elem) { 1328 | this.getStaticData(); 1329 | this.computedFixedValue(); 1330 | this.setPosition(); 1331 | this.unbindEvents(); 1332 | this.bindEvents(); 1333 | } 1334 | }, 1335 | printError: function printError(msg) { 1336 | if (this.debug) { 1337 | console.error("[VueSlider error]: ".concat(msg)); 1338 | } 1339 | } 1340 | }, 1341 | mounted: function mounted() { 1342 | var _this6 = this; 1343 | 1344 | this.isComponentExists = true; 1345 | 1346 | if (typeof window === 'undefined' || typeof document === 'undefined') { 1347 | return this.printError('window or document is undefined, can not be initialization.'); 1348 | } 1349 | 1350 | this.$nextTick(function () { 1351 | _this6.getStaticData(); 1352 | 1353 | _this6.setValue(_this6.limitValue(_this6.value), true, _this6.startAnimation ? _this6.speed : 0); 1354 | 1355 | _this6.bindEvents(); 1356 | 1357 | if (_this6.isRange && _this6.tooltipMerge && !_this6.startAnimation) { 1358 | _this6.handleOverlapTooltip(); 1359 | } 1360 | }); 1361 | this.isMounted = true; 1362 | }, 1363 | watch: { 1364 | value: function value(val) { 1365 | this.flag || this.setValue(val, true); 1366 | }, 1367 | show: function show(bool) { 1368 | if (bool && !this.size) { 1369 | this.$nextTick(this.refresh); 1370 | } 1371 | }, 1372 | max: function max(val) { 1373 | if (val < this.min) { 1374 | return this.printError('The maximum value can not be less than the minimum value.'); 1375 | } 1376 | 1377 | var resetVal = this.limitValue(this.val); 1378 | this.setValue(resetVal); 1379 | this.refresh(); 1380 | }, 1381 | min: function min(val) { 1382 | if (val > this.max) { 1383 | return this.printError('The minimum value can not be greater than the maximum value.'); 1384 | } 1385 | 1386 | var resetVal = this.limitValue(this.val); 1387 | this.setValue(resetVal); 1388 | this.refresh(); 1389 | }, 1390 | fixed: function fixed() { 1391 | this.computedFixedValue(); 1392 | }, 1393 | minRange: function minRange() { 1394 | this.computedFixedValue(); 1395 | } 1396 | }, 1397 | beforeDestroy: function beforeDestroy() { 1398 | this.isComponentExists = false; 1399 | this.unbindEvents(); 1400 | this.refresh(); 1401 | }, 1402 | deactivated: function deactivated() { 1403 | this.isComponentExists = false; 1404 | this.unbindEvents(); 1405 | this.refresh(); 1406 | } 1407 | }; 1408 | 1409 | var version = "1.0.3"; 1410 | 1411 | Slider.version = version; 1412 | 1413 | Slider.install = function (Vue) { 1414 | Vue.component(Slider.name, Slider); 1415 | }; 1416 | 1417 | if (typeof window !== 'undefined' && window.Vue) { 1418 | window.Vue.use(Slider); 1419 | } 1420 | 1421 | export default Slider; 1422 | -------------------------------------------------------------------------------- /dist/vue-range-slider.min.css: -------------------------------------------------------------------------------- 1 | .vue-range-slider.slider-component{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vue-range-slider.slider-component .slider{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-range-slider.slider-component .slider:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}.vue-range-slider.slider-component .slider .slider-dot{position:absolute;-webkit-transition:all 0s;transition:all 0s;will-change:transform;cursor:pointer;z-index:5}.vue-range-slider.slider-component .slider .slider-dot .slider-dot-handle{width:100%;height:100%;border-radius:50%;background-color:#fff;-webkit-box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32)}.vue-range-slider.slider-component .slider .slider-dot.slider-dot-focus .slider-dot-handle{-webkit-box-shadow:0 0 2px 1px #3498db;box-shadow:0 0 2px 1px #3498db}.vue-range-slider.slider-component .slider .slider-dot.slider-dot-dragging{z-index:5}.vue-range-slider.slider-component .slider .slider-dot.slider-dot-disabled{z-index:4}.vue-range-slider.slider-component .slider .slider-dot.slider-hover:hover .slider-tooltip-wrap{display:block}.vue-range-slider.slider-component .slider .slider-dot.slider-always .slider-tooltip-wrap{display:block!important}.vue-range-slider.slider-component .slider .slider-process{position:absolute;border-radius:15px;background-color:#3498db;z-index:1}.vue-range-slider.slider-component .slider .slider-process.slider-process-draggable{cursor:pointer;z-index:3}.vue-range-slider.slider-component .slider .slider-input{position:absolute;overflow:hidden;height:1px;width:1px;clip:rect(1px,1px,1px,1px)}.vue-range-slider.slider-component .slider .slider-piecewise{position:absolute;width:100%;padding:0;margin:0;left:0;top:0;height:100%;list-style:none}.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item{position:absolute;width:8px;height:8px}.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:first-child .piecewise-dot,.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:last-child .piecewise-dot{visibility:hidden}.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item .piecewise-dot{position:absolute;left:50%;top:50%;width:100%;height:100%;display:inline-block;background-color:rgba(0,0,0,.16);border-radius:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2;-webkit-transition:all .3s;transition:all .3s}.vue-range-slider.slider-component.slider-horizontal .slider-dot{left:0}.vue-range-slider.slider-component.slider-horizontal .slider-process{width:0;height:100%;top:0;left:0;will-change:width}.vue-range-slider.slider-component.slider-vertical .slider-dot{bottom:0}.vue-range-slider.slider-component.slider-vertical .slider-process{width:100%;height:0;bottom:0;left:0;will-change:height}.vue-range-slider.slider-component.slider-horizontal-reverse .slider-dot{right:0}.vue-range-slider.slider-component.slider-horizontal-reverse .slider-process{width:0;height:100%;top:0;right:0}.vue-range-slider.slider-component.slider-vertical-reverse .slider-dot{top:0}.vue-range-slider.slider-component.slider-vertical-reverse .slider-process{width:100%;height:0;top:0;left:0}.vue-range-slider.slider-component.slider-horizontal-reverse .slider-piecewise .piecewise-item .piecewise-label,.vue-range-slider.slider-component.slider-horizontal .slider-piecewise .piecewise-item .piecewise-label{position:absolute;display:inline-block;top:100%;left:50%;white-space:nowrap;font-size:12px;color:#333;-webkit-transform:translate(-50%,8px);transform:translate(-50%,8px);visibility:visible}.vue-range-slider.slider-component.slider-vertical-reverse .slider-piecewise .piecewise-item .piecewise-label,.vue-range-slider.slider-component.slider-vertical .slider-piecewise .piecewise-item .piecewise-label{position:absolute;display:inline-block;top:50%;left:100%;white-space:nowrap;font-size:12px;color:#333;-webkit-transform:translate(8px,-50%);transform:translate(8px,-50%);visibility:visible}.vue-range-slider.slider-component .slider-tooltip-wrap{display:none;position:absolute;z-index:9}.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top{top:-9px;left:50%;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top .slider-tooltip:before{content:"";position:absolute;bottom:-10px;left:50%;width:0;height:0;border:5px solid transparent;border-top-color:inherit;-webkit-transform:translate(-50%);transform:translate(-50%)}.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom{bottom:-9px;left:50%;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom .slider-tooltip:before{content:"";position:absolute;top:-10px;left:50%;width:0;height:0;border:5px solid transparent;border-bottom-color:inherit;-webkit-transform:translate(-50%);transform:translate(-50%)}.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left{top:50%;left:-9px;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%)}.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left .slider-tooltip:before{content:"";position:absolute;top:50%;right:-10px;width:0;height:0;border:5px solid transparent;border-left-color:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right{top:50%;right:-9px;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%)}.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right .slider-tooltip:before{content:"";position:absolute;top:50%;left:-10px;width:0;height:0;border:5px solid transparent;border-right-color:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip{display:block;visibility:hidden}.vue-range-slider.slider-component .slider-tooltip-wrap .slider-tooltip{display:block;font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border:1px solid #3498db;background-color:#3498db}.vue-range-slider.slider-component.slider-disabled{opacity:.5;cursor:not-allowed}.vue-range-slider.slider-component.slider-disabled .slider-dot{cursor:not-allowed}.vue-range-slider.slider-component.slider-has-label{margin-bottom:15px} 2 | /*# sourceMappingURL=vue-range-slider.min.css.map */ 3 | -------------------------------------------------------------------------------- /dist/vue-range-slider.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["vue-range-slider.styl","vue-range-slider.css"],"names":[],"mappings":"AACE,mCACE,iBAAU,CACV,6BAAY,CAAZ,qBAAY,CACZ,wBAAa,CAAb,qBAAa,CAAb,oBAAa,CAAb,gBCAJ,CDCI,2CACE,iBAAU,CACV,aAAS,CACT,kBAAe,CACf,qBCCN,CDAM,iDACE,UAAS,CACT,iBAAU,CACV,MAAM,CACN,KAAK,CACL,UAAO,CACP,WAAQ,CACR,SCER,CDDM,uDACE,iBAAU,CACV,yBAAY,CAAZ,iBAAY,CACZ,qBAAa,CACb,cAAQ,CACR,SCGR,CDFQ,0EACE,UAAO,CACP,WAAQ,CACR,iBAAe,CACf,qBAAkB,CAClB,oDAAY,CAAZ,4CCIV,CDFU,2FACE,sCAAY,CAAZ,8BCIZ,CDHQ,2EACE,SCKV,CDJQ,2EACE,SCMV,CDHY,+FACE,aCKd,CDHU,0FACE,uBCKZ,CDJM,2DACE,iBAAU,CACV,kBAAe,CACf,wBAAkB,CAClB,SCMR,CDLQ,oFACE,cAAQ,CACR,SCOV,CDNM,yDACE,iBAAU,CACV,eAAU,CACV,UAAQ,CACR,SAAO,CACP,0BCQR,CDPM,6DACE,iBAAU,CACV,UAAO,CACP,SAAS,CACT,QAAQ,CACR,MAAM,CACN,KAAK,CACL,WAAQ,CACR,eCSR,CDRQ,6EACE,iBAAU,CACV,SAAO,CACP,UCUV,CDRY,+MACE,iBCWd,CDVU,4FACE,iBAAU,CACV,QAAM,CACN,OAAK,CACL,UAAO,CACP,WAAQ,CACR,oBAAS,CACT,gCAAkB,CAClB,iBAAe,CACf,sCAAW,CAAX,8BAAW,CACX,SAAS,CACT,0BAAY,CAAZ,kBCYZ,CDVM,iEACE,MCYR,CDXM,qEACE,OAAO,CACP,WAAQ,CACR,KAAK,CACL,MAAM,CACN,iBCaR,CDXM,+DACE,QCaR,CDZM,mEACE,UAAO,CACP,QAAQ,CACR,QAAQ,CACR,MAAM,CACN,kBCcR,CDZM,yEACE,OCcR,CDbM,6EACE,OAAO,CACP,WAAQ,CACR,KAAK,CACL,OCeR,CDbM,uEACE,KCeR,CDdM,2EACE,UAAO,CACP,QAAQ,CACR,KAAK,CACL,MCgBR,CDZU,wNACE,iBAAU,CACV,oBAAS,CACT,QAAK,CACL,QAAM,CACN,kBAAa,CACb,cAAW,CACX,UAAO,CACP,qCAAW,CAAX,6BAAW,CACX,kBCeZ,CDXU,oNACE,iBAAU,CACV,oBAAS,CACT,OAAK,CACL,SAAM,CACN,kBAAa,CACb,cAAW,CACX,UAAO,CACP,qCAAW,CAAX,6BAAW,CACX,kBCcZ,CDbI,wDACE,YAAS,CACT,iBAAU,CACV,SCeN,CDXM,2EACE,QAAK,CACL,QAAM,CACN,uCAAW,CAAX,+BCiBR,CDhBQ,kGACE,UAAS,CACT,iBAAU,CACV,YAAQ,CACR,QAAM,CACN,OAAO,CACP,QAAQ,CACR,4BAAQ,CACR,wBAAkB,CAClB,iCAAW,CAAX,yBCkBV,CDjBM,8EACE,WAAQ,CACR,QAAM,CACN,sCAAW,CAAX,8BCmBR,CDlBQ,qGACE,UAAS,CACT,iBAAU,CACV,SAAK,CACL,QAAM,CACN,OAAO,CACP,QAAQ,CACR,4BAAQ,CACR,2BAAqB,CACrB,iCAAW,CAAX,yBCoBV,CDnBM,4EACE,OAAK,CACL,SAAM,CACN,uCAAW,CAAX,+BCqBR,CDpBQ,mGACE,UAAS,CACT,iBAAU,CACV,OAAK,CACL,WAAO,CACP,OAAO,CACP,QAAQ,CACR,4BAAQ,CACR,yBAAmB,CACnB,kCAAW,CAAX,0BCsBV,CDrBM,6EACE,OAAK,CACL,UAAO,CACP,sCAAW,CAAX,8BCuBR,CDtBQ,oGACE,UAAS,CACT,iBAAU,CACV,OAAK,CACL,UAAM,CACN,OAAO,CACP,QAAQ,CACR,4BAAQ,CACR,0BAAoB,CACpB,kCAAW,CAAX,0BCwBV,CDvBM,uEACE,aAAS,CACT,iBCyBR,CDxBM,wEACE,aAAS,CACT,cAAW,CACX,kBAAa,CACb,eAAS,CACT,cAAW,CACX,iBAAY,CACZ,UAAO,CACP,iBAAe,CACf,wBAAQ,CACR,wBC0BR,CDzBI,mDACE,UAAS,CACT,kBC2BN,CD1BM,+DACE,kBC4BR,CD3BI,oDACE,kBC6BN","file":"vue-range-slider.min.css","sourcesContent":[".vue-range-slider\n &.slider-component\n position: relative\n box-sizing: border-box\n user-select: none\n .slider\n position: relative\n display: block\n border-radius: 15px\n background-color: #ccc\n &::after\n content: ''\n position: absolute\n left: 0\n top: 0\n width: 100%\n height: 100%\n z-index: 2\n .slider-dot\n position: absolute\n transition: all 0s\n will-change: transform\n cursor: pointer\n z-index: 5\n .slider-dot-handle\n width: 100%\n height: 100%\n border-radius: 50%\n background-color: #fff\n box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32)\n &.slider-dot-focus\n .slider-dot-handle\n box-shadow: 0 0 2px 1px #3498db\n &.slider-dot-dragging\n z-index: 5\n &.slider-dot-disabled\n z-index: 4\n &.slider-hover\n &:hover\n .slider-tooltip-wrap\n display: block\n &.slider-always\n .slider-tooltip-wrap\n display: block!important\n .slider-process\n position: absolute\n border-radius: 15px\n background-color: #3498db\n z-index: 1\n &.slider-process-draggable\n cursor: pointer\n z-index: 3\n .slider-input\n position: absolute\n overflow: hidden\n height: 1px\n width: 1px\n clip: rect(1px, 1px, 1px, 1px)\n .slider-piecewise\n position: absolute\n width: 100%\n padding: 0\n margin: 0\n left: 0\n top: 0\n height: 100%\n list-style: none\n .piecewise-item\n position: absolute\n width: 8px\n height: 8px\n &:first-child,&:last-child\n .piecewise-dot\n visibility: hidden\n .piecewise-dot\n position: absolute\n left: 50%\n top: 50%\n width: 100%\n height: 100%\n display: inline-block\n background-color: rgba(0, 0, 0, 0.16)\n border-radius: 50%\n transform: translate(-50%, -50%)\n z-index: 2\n transition: all .3s\n &.slider-horizontal\n .slider-dot\n left:0\n .slider-process\n width: 0\n height: 100%\n top: 0\n left: 0\n will-change: width\n &.slider-vertical\n .slider-dot\n bottom:0\n .slider-process\n width: 100%\n height: 0\n bottom: 0\n left: 0\n will-change: height\n &.slider-horizontal-reverse\n .slider-dot\n right:0\n .slider-process\n width: 0\n height: 100%\n top: 0\n right: 0\n &.slider-vertical-reverse\n .slider-dot\n top:0\n .slider-process\n width: 100%\n height: 0\n top: 0\n left: 0\n &.slider-horizontal,&.slider-horizontal-reverse\n .slider-piecewise\n .piecewise-item\n .piecewise-label\n position: absolute\n display: inline-block\n top: 100%\n left: 50%\n white-space: nowrap\n font-size: 12px\n color: #333\n transform: translate(-50%, 8px)\n visibility: visible\n &.slider-vertical,&.slider-vertical-reverse\n .slider-piecewise\n .piecewise-item\n .piecewise-label\n position: absolute\n display: inline-block\n top: 50%\n left: 100%\n white-space: nowrap\n font-size: 12px\n color: #333\n transform: translate(8px, -50%)\n visibility: visible\n .slider-tooltip-wrap\n display: none\n position: absolute\n z-index: 9\n &.merged-tooltip\n display:block\n visibility:hidden\n &.slider-tooltip-top\n top: -9px\n left: 50%\n transform: translate(-50%, -100%)\n .slider-tooltip::before\n content: ''\n position: absolute\n bottom: -10px\n left: 50%\n width: 0\n height: 0\n border: 5px solid transparent\n border-top-color: inherit\n transform: translate(-50%, 0)\n &.slider-tooltip-bottom\n bottom: -9px;\n left: 50%;\n transform: translate(-50%, 100%)\n .slider-tooltip::before\n content: ''\n position: absolute\n top: -10px\n left: 50%\n width: 0\n height: 0\n border: 5px solid transparent\n border-bottom-color: inherit\n transform: translate(-50%, 0)\n &.slider-tooltip-left\n top: 50%\n left: -9px\n transform: translate(-100%, -50%)\n .slider-tooltip::before\n content: ''\n position: absolute\n top: 50%\n right: -10px\n width: 0\n height: 0\n border: 5px solid transparent\n border-left-color: inherit\n transform: translate(0, -50%)\n &.slider-tooltip-right\n top: 50%\n right: -9px\n transform: translate(100%, -50%)\n .slider-tooltip::before\n content: ''\n position: absolute\n top: 50%\n left: -10px\n width: 0\n height: 0\n border: 5px solid transparent\n border-right-color: inherit\n transform: translate(0, -50%)\n &.merged-tooltip\n display: block\n visibility: hidden\n .slider-tooltip\n display: block\n font-size: 14px\n white-space: nowrap\n padding: 2px 5px\n min-width: 20px\n text-align: center\n color: #fff\n border-radius: 5px\n border: 1px solid #3498db\n background-color: #3498db\n &.slider-disabled\n opacity: .5\n cursor: not-allowed\n .slider-dot\n cursor: not-allowed\n &.slider-has-label\n margin-bottom: 15px\n",".vue-range-slider.slider-component {\n position: relative;\n box-sizing: border-box;\n user-select: none;\n}\n.vue-range-slider.slider-component .slider {\n position: relative;\n display: block;\n border-radius: 15px;\n background-color: #ccc;\n}\n.vue-range-slider.slider-component .slider::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 2;\n}\n.vue-range-slider.slider-component .slider .slider-dot {\n position: absolute;\n transition: all 0s;\n will-change: transform;\n cursor: pointer;\n z-index: 5;\n}\n.vue-range-slider.slider-component .slider .slider-dot .slider-dot-handle {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: #fff;\n box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,0.32);\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-dot-focus .slider-dot-handle {\n box-shadow: 0 0 2px 1px #3498db;\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-dot-dragging {\n z-index: 5;\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-dot-disabled {\n z-index: 4;\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-hover:hover .slider-tooltip-wrap {\n display: block;\n}\n.vue-range-slider.slider-component .slider .slider-dot.slider-always .slider-tooltip-wrap {\n display: block !important;\n}\n.vue-range-slider.slider-component .slider .slider-process {\n position: absolute;\n border-radius: 15px;\n background-color: #3498db;\n z-index: 1;\n}\n.vue-range-slider.slider-component .slider .slider-process.slider-process-draggable {\n cursor: pointer;\n z-index: 3;\n}\n.vue-range-slider.slider-component .slider .slider-input {\n position: absolute;\n overflow: hidden;\n height: 1px;\n width: 1px;\n clip: rect(1px, 1px, 1px, 1px);\n}\n.vue-range-slider.slider-component .slider .slider-piecewise {\n position: absolute;\n width: 100%;\n padding: 0;\n margin: 0;\n left: 0;\n top: 0;\n height: 100%;\n list-style: none;\n}\n.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:first-child .piecewise-dot,\n.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:last-child .piecewise-dot {\n visibility: hidden;\n}\n.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item .piecewise-dot {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 100%;\n height: 100%;\n display: inline-block;\n background-color: rgba(0,0,0,0.16);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n transition: all 0.3s;\n}\n.vue-range-slider.slider-component.slider-horizontal .slider-dot {\n left: 0;\n}\n.vue-range-slider.slider-component.slider-horizontal .slider-process {\n width: 0;\n height: 100%;\n top: 0;\n left: 0;\n will-change: width;\n}\n.vue-range-slider.slider-component.slider-vertical .slider-dot {\n bottom: 0;\n}\n.vue-range-slider.slider-component.slider-vertical .slider-process {\n width: 100%;\n height: 0;\n bottom: 0;\n left: 0;\n will-change: height;\n}\n.vue-range-slider.slider-component.slider-horizontal-reverse .slider-dot {\n right: 0;\n}\n.vue-range-slider.slider-component.slider-horizontal-reverse .slider-process {\n width: 0;\n height: 100%;\n top: 0;\n right: 0;\n}\n.vue-range-slider.slider-component.slider-vertical-reverse .slider-dot {\n top: 0;\n}\n.vue-range-slider.slider-component.slider-vertical-reverse .slider-process {\n width: 100%;\n height: 0;\n top: 0;\n left: 0;\n}\n.vue-range-slider.slider-component.slider-horizontal .slider-piecewise .piecewise-item .piecewise-label,\n.vue-range-slider.slider-component.slider-horizontal-reverse .slider-piecewise .piecewise-item .piecewise-label {\n position: absolute;\n display: inline-block;\n top: 100%;\n left: 50%;\n white-space: nowrap;\n font-size: 12px;\n color: #333;\n transform: translate(-50%, 8px);\n visibility: visible;\n}\n.vue-range-slider.slider-component.slider-vertical .slider-piecewise .piecewise-item .piecewise-label,\n.vue-range-slider.slider-component.slider-vertical-reverse .slider-piecewise .piecewise-item .piecewise-label {\n position: absolute;\n display: inline-block;\n top: 50%;\n left: 100%;\n white-space: nowrap;\n font-size: 12px;\n color: #333;\n transform: translate(8px, -50%);\n visibility: visible;\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap {\n display: none;\n position: absolute;\n z-index: 9;\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip {\n display: block;\n visibility: hidden;\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top {\n top: -9px;\n left: 50%;\n transform: translate(-50%, -100%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top .slider-tooltip::before {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-top-color: inherit;\n transform: translate(-50%, 0);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom {\n bottom: -9px;\n left: 50%;\n transform: translate(-50%, 100%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom .slider-tooltip::before {\n content: '';\n position: absolute;\n top: -10px;\n left: 50%;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-bottom-color: inherit;\n transform: translate(-50%, 0);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left {\n top: 50%;\n left: -9px;\n transform: translate(-100%, -50%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left .slider-tooltip::before {\n content: '';\n position: absolute;\n top: 50%;\n right: -10px;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-left-color: inherit;\n transform: translate(0, -50%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right {\n top: 50%;\n right: -9px;\n transform: translate(100%, -50%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right .slider-tooltip::before {\n content: '';\n position: absolute;\n top: 50%;\n left: -10px;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-right-color: inherit;\n transform: translate(0, -50%);\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip {\n display: block;\n visibility: hidden;\n}\n.vue-range-slider.slider-component .slider-tooltip-wrap .slider-tooltip {\n display: block;\n font-size: 14px;\n white-space: nowrap;\n padding: 2px 5px;\n min-width: 20px;\n text-align: center;\n color: #fff;\n border-radius: 5px;\n border: 1px solid #3498db;\n background-color: #3498db;\n}\n.vue-range-slider.slider-component.slider-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.vue-range-slider.slider-component.slider-disabled .slider-dot {\n cursor: not-allowed;\n}\n.vue-range-slider.slider-component.slider-has-label {\n margin-bottom: 15px;\n}\n"]} -------------------------------------------------------------------------------- /dist/vue-range-slider.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue-range-slider v1.0.3 3 | * (c) 2016-2019 xwpongithub 4 | * Released under the MIT License. 5 | */ 6 | !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.VueRangeSlider=i()}(this,function(){"use strict";var i,o=(i="undefined"!=typeof window&&window.devicePixelRatio||1,function(t){return Math.round(t*i)/i}),t=function(){for(var t=navigator.userAgent.toLowerCase(),i=["Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"],e=!1,s=0;s=this.indexRange[0]&&s<=this.indexRange[1]})}return t},total:function(){return this.data?this.data.length-1:(Math.floor((this.maximum-this.minimum)*this.multiple)%(this.step*this.multiple)!=0&&this.printError("Prop[step] is illegal, Please make sure that the step can be divisible"),(this.maximum-this.minimum)/this.step)},piecewiseDotStyle:function(){return"vertical"===this.direction?{width:"".concat(this.width,"px"),height:"".concat(this.width,"px")}:{width:"".concat(this.height,"px"),height:"".concat(this.height,"px")}},dotStyles:function(){return"vertical"===this.direction?{width:"".concat(this.dotWidthVal,"px"),height:"".concat(this.dotHeightVal,"px"),left:"".concat(-(this.dotWidthVal-this.width)/2,"px")}:{width:"".concat(this.dotWidthVal,"px"),height:"".concat(this.dotHeightVal,"px"),top:"".concat(-(this.dotHeightVal-this.height)/2,"px")}},sliderStyles:function(){return s(this.sliderStyle)?this.isRange?this.sliderStyle:this.sliderStyle[1]:"function"==typeof this.sliderStyle?this.sliderStyle(this.val,this.currentIndex):this.isRange?[this.sliderStyle,this.sliderStyle]:this.sliderStyle},tooltipStyles:function(){return s(this.tooltipStyle)?this.isRange?this.tooltipStyle:this.tooltipStyle[1]:"function"==typeof this.tooltipStyle?this.tooltipStyle(this.val,this.currentIndex):this.isRange?[this.tooltipStyle,this.tooltipStyle]:this.tooltipStyle},focusStyles:function(){return s(this.focusStyle)?this.isRange?this.focusStyle:this.focusStyle[1]:"function"==typeof this.focusStyle?this.focusStyle(this.val,this.currentIndex):this.isRange?[this.focusStyle,this.focusStyle]:this.focusStyle},disabledDotStyles:function(){var t=this.disabledDotStyle;if(s(t))return t;if("function"!=typeof t)return t?[t,t]:[{backgroundColor:"#ccc"},{backgroundColor:"#ccc"}];var i=t(this.val,this.currentIndex);return s(i)?i:[i,i]},elemStyles:function(){return"vertical"===this.direction?{width:"".concat(this.width,"px"),height:"100%"}:{height:"".concat(this.height,"px")}},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?"".concat(this.height,"px"):this.height,padding:"".concat(this.dotHeightVal/2,"px ").concat(this.dotWidthVal/2,"px")}:{width:"number"==typeof this.width?"".concat(this.width,"px"):this.width,padding:"".concat(this.dotHeightVal/2,"px ").concat(this.dotWidthVal/2,"px")}},stateClass:function(){return{"slider-state-process-drag":this.processFlag,"slider-state-drag":this.flag&&!this.processFlag&&!this.keydownFlag,"slider-state-focus":this.focusFlag}},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"slider-always":this.tooltip?"slider-".concat(this.tooltip):""},tooltipClass:function(){return["slider-tooltip-".concat(this.tooltipDirection),"slider-tooltip"]},minimum:function(){return this.data?0:this.min},maximum:function(){return this.data?this.data.length-1:this.max},multiple:function(){var t="".concat(this.step).split(".")[1];return t?Math.pow(10,t.length):1},indexRange:function(){return this.isRange?this.currentIndex:[0,this.currentIndex]},spacing:function(){return this.data?1:this.step},gap:function(){return this.size/this.total},dotWidthVal:function(){return"number"==typeof this.dotWidth?this.dotWidth:this.dotSize},dotHeightVal:function(){return"number"==typeof this.dotHeight?this.dotHeight:this.dotSize},disabledArray:function(){return s(this.disabled)?this.disabled:[this.disabled,this.disabled]},boolDisabled:function(){return this.disabledArray.every(function(t){return!0===t})},disabledClass:function(){return this.boolDisabled?"slider-disabled":""},flowDirection:function(){return"slider-".concat(this.direction+(this.reverse?"-reverse":""))},isRange:function(){return s(this.value)},isDisabled:function(){return"none"===this.eventType||this.boolDisabled},isFixed:function(){return this.fixed||this.minRange},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?this.isFixed?[[0,(this.total-this.fixedValue)*this.gap],[this.fixedValue*this.gap,this.size]]:[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?this.isFixed?[[this.minimum,this.maximum-this.fixedValue*(this.spacing*this.multiple)/this.multiple],[this.minimum+this.fixedValue*(this.spacing*this.multiple)/this.multiple,this.maximum]]:[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},idleSlider:function(){return 0===this.currentSlider?1:0},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot}},methods:{setValue:function(t,i,e){var s=this;if(n(this.val,t)){var r=this.limitValue(t);this.val=this.isRange?r.concat():r,this.computedFixedValue(),this.syncValue(i)}this.$nextTick(function(){return s.setPosition(e)})},setIndex:function(t){var i;s(t)&&this.isRange?(i=this.data?[this.data[t[0]],this.data[t[1]]]:[this.getValueByIndex(t[0]),this.getValueByIndex(t[1])],this.setValue(i)):(t=this.getValueByIndex(t),this.isRange&&(this.currentSlider=t>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(t))},wrapClick:function(t){if(this.isDisabled||!this.clickable||this.processFlag||this.dragFlag)return!1;var i=this.getPos(t);if(this.isRange)if(this.disabledArray.every(function(t){return!1===t}))this.currentSlider=i>(this.position[1]-this.position[0])/2+this.position[0]?1:0;else if(this.disabledArray[0]){if(ithis.position[1])return!1;this.currentSlider=0}if(this.disabledArray[this.currentSlider])return!1;if(this.setValueOnPos(i),this.isRange&&this.tooltipMerge){var e=setInterval(this.handleOverlapTooltip,16.7);setTimeout(function(){return window.clearInterval(e)},1e3*this.speed)}},processClick:function(t){this.fixed&&t.stopPropagation()},syncValue:function(t){var i=this.isRange?this.val.concat():this.val;this.$emit("input",i),this.keydownFlag&&this.$emit("on-keypress",i),t||this.$emit("slide-end",i)},getPos:function(t){return this.realTime&&this.getStaticData(),"vertical"===this.direction?this.reverse?t.pageY-this.offset:this.size-(t.pageY-this.offset):this.reverse?this.size-(t.pageX-this.offset):t.pageX-this.offset},setValueOnPos:function(t,i){var e=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit,r=Math.round(t/this.gap);if(t>=e[0]&&t<=e[1]){var n=this.getValueByIndex(r);this.setTransform(t),this.setCurrentValue(n,i),this.isRange&&(this.fixed||this.isLessRange(t,r))&&(this.setTransform(t+this.fixedValue*this.gap*(0===this.currentSlider?1:-1),!0),this.setCurrentValue((n*this.multiple+this.fixedValue*this.spacing*this.multiple*(0===this.currentSlider?1:-1))/this.multiple,i,!0))}else{var a=tthis.maximum)return!1;this.isRange?n(this.currentValue[s],t)&&(this.currentValue.splice(s,1,t),this.lazy&&this.flag||this.syncValue()):n(this.currentValue,t)&&(this.currentValue=t,this.lazy&&this.flag||this.syncValue()),i||this.setPosition()},setPosition:function(t){this.flag||this.setTransitionTime(void 0===t?this.speed:t),this.isRange?(this.setTransform(this.position[0],1===this.currentSlider),this.setTransform(this.position[1],0===this.currentSlider)):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(t,i){var e=i?this.idleSlider:this.currentSlider,s=o(("vertical"===this.direction?this.dotHeightVal/2-t:t-this.dotWidthVal/2)*(this.reverse?-1:1)),r="vertical"===this.direction?"translateY(".concat(s,"px)"):"translateX(".concat(s,"px)"),n=this.fixed?"".concat(this.fixedValue*this.gap,"px"):"".concat(0===e?this.position[1]-t:t-this.position[0],"px"),a=this.fixed?"".concat(0===e?t:t-this.fixedValue*this.gap,"px"):"".concat(0===e?t:this.position[0],"px");this.isRange?(this.slider[e].style[d]=r,"vertical"===this.direction?(this.$refs.process.style.height=n,this.$refs.process.style[this.reverse?"top":"bottom"]=a):(this.$refs.process.style.width=n,this.$refs.process.style[this.reverse?"right":"left"]=a)):(this.slider.style[d]=r,"vertical"===this.direction?(this.$refs.process.style.height="".concat(t,"px"),this.$refs.process.style[this.reverse?"top":"bottom"]=0):(this.$refs.process.style.width="".concat(t,"px"),this.$refs.process.style[this.reverse?"right":"left"]=0))},setTransitionTime:function(t){if(t||this.$refs.process.offsetWidth,this.isRange){for(var i=this.slider.length,e=0;ee.max?(e.printError("The value of the slider is ".concat(i,", the maximum value is ").concat(e.max,", the value of this slider can not be greater than the maximum value")),e.max):t}return this.isRange?i.map(function(t){return s(t)}):s(i)},getStaticData:function(){this.$refs.elem&&(this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.offset="vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left)},handleOverlapTooltip:function(){var t=this.tooltipDirection[0]===this.tooltipDirection[1];if(this.isRange&&t){var i=this.reverse?this.$refs.tooltip1:this.$refs.tooltip0,e=this.reverse?this.$refs.tooltip0:this.$refs.tooltip1,s=i.getBoundingClientRect(),r=e.getBoundingClientRect(),n=s.right,a=r.left,o=s.top,h=r.top+r.height,l="horizontal"===this.direction&&a=this.maxRange?(this.fixedValue=this.maxRange,!0):(this.computedFixedValue(),!1)},getValueByIndex:function(t){return(this.spacing*this.multiple*t+this.minimum*this.multiple)/this.multiple},getIndexByValue:function(t){return Math.round((t-this.minimum)*this.multiple)/(this.spacing*this.multiple)},formatting:function(t){return"string"==typeof this.formatter?this.formatter.replace(/{value}/,t):this.formatter(t)},mergeFormatting:function(e,s){return"string"==typeof this.mergeFormatter?this.mergeFormatter.replace(/{(value1|value2)}/g,function(t,i){return"value1"===i?e:s}):this.mergeFormatter(e,s)},_start:function(t,i,e){var s=1=s[0])return e}return t});t[0]>t[1]&&(this.focusSlider=0===this.focusSlider?1:0,t=t.reverse()),this.setIndex(t)}else this.setIndex(r(this.currentIndex))},bindEvents:function(){var i=this;this.processStartFn=function(t){i._start(t,0,!0)},this.dot0StartFn=function(t){i._start(t,0)},this.dot1StartFn=function(t){i._start(t,1)},t?(h(this.$refs.process,f,this.processStartFn),h(document,p,this._move),h(document,g,this._end),h(document,m,this._end),this.isRange?(h(this.$refs.dot0,f,this.dot0StartFn),h(this.$refs.dot1,f,this.dot1StartFn)):h(this.$refs.dot,f,this._start)):(h(this.$refs.process,y,this.processStartFn),h(document,y,this.blurSlider),h(document,v,this._move),h(document,b,this._end),h(document,S,this._end),this.isRange?(h(this.$refs.dot0,y,this.dot0StartFn),h(this.$refs.dot1,y,this.dot1StartFn)):h(this.$refs.dot,y,this._start)),h(document,x,this.handleKeydown),h(document,w,this.handleKeyup),h(window,V,this.refresh),this.isRange&&this.tooltipMerge&&(h(this.$refs.dot0,c,this.handleOverlapTooltip),h(this.$refs.dot1,c,this.handleOverlapTooltip))},unbindEvents:function(){t?(l(this.$refs.process,f,this.processStartFn),l(document,p,this._move),l(document,g,this._end),l(document,m,this._end),this.isRange?(l(this.$refs.dot0,f,this.dot0StartFn),l(this.$refs.dot1,f,this.dot1StartFn)):l(this.$refs.dot,f,this._start)):(l(this.$refs.process,y,this.processStartFn),l(document,y,this.blurSlider),l(document,v,this._move),l(document,b,this._end),l(document,S,this._end),this.isRange?(l(this.$refs.dot0,y,this.dot0StartFn),l(this.$refs.dot1,y,this.dot1StartFn)):l(this.$refs.dot,y,this._start)),l(document,x,this.handleKeydown),l(document,w,this.handleKeyup),l(window,V,this.refresh),this.isRange&&this.tooltipMerge&&(l(this.$refs.dot0,c,this.handleOverlapTooltip),l(this.$refs.dot1,c,this.handleOverlapTooltip))},refresh:function(){this.$refs.elem&&(this.getStaticData(),this.computedFixedValue(),this.setPosition(),this.unbindEvents(),this.bindEvents())},printError:function(){this.debug}},mounted:function(){var t=this;if(this.isComponentExists=!0,"undefined"==typeof window||"undefined"==typeof document)return this.printError("window or document is undefined, can not be initialization.");this.$nextTick(function(){t.getStaticData(),t.setValue(t.limitValue(t.value),!0,t.startAnimation?t.speed:0),t.bindEvents(),t.isRange&&t.tooltipMerge&&!t.startAnimation&&t.handleOverlapTooltip()}),this.isMounted=!0},watch:{value:function(t){this.flag||this.setValue(t,!0)},show:function(t){t&&!this.size&&this.$nextTick(this.refresh)},max:function(t){if(tthis.max)return this.printError("The minimum value can not be greater than the maximum value.");var i=this.limitValue(this.val);this.setValue(i),this.refresh()},fixed:function(){this.computedFixedValue()},minRange:function(){this.computedFixedValue()}},beforeDestroy:function(){this.isComponentExists=!1,this.unbindEvents(),this.refresh()},deactivated:function(){this.isComponentExists=!1,this.unbindEvents(),this.refresh()}};return R.version="1.0.3",R.install=function(t){t.component(R.name,R)},"undefined"!=typeof window&&window.Vue&&window.Vue.use(R),R}); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const postcss = require('gulp-postcss') 2 | const gulp = require('gulp') 3 | const autoprefixer = require('autoprefixer') 4 | const cssnano = require('cssnano') 5 | const stylus = require('gulp-stylus') 6 | const rename = require("gulp-rename") 7 | const sourcemaps = require('gulp-sourcemaps') 8 | // const pxtorem = require('postcss-pxtorem') 9 | const fs = require('fs') 10 | const path = require('path') 11 | const rollup = require('rollup') 12 | const babel = require('rollup-plugin-babel') 13 | const uglify = require('uglify-js') 14 | const zlib = require('zlib') 15 | const json = require('rollup-plugin-json') 16 | const header = require('gulp-header') 17 | const version = require('./package').version 18 | 19 | if (!fs.existsSync('dist')) { 20 | fs.mkdirSync('dist') 21 | } 22 | 23 | function resolve(p) { 24 | return path.resolve(__dirname, './', p) 25 | } 26 | 27 | const banner = 28 | '/*!\n' + 29 | ' * vue-range-slider v' + version + '\n' + 30 | ' * (c) 2016-' + new Date().getFullYear() + ' xwpongithub\n' + 31 | ' * Released under the MIT License.\n' + 32 | ' */\n' 33 | 34 | const builds = [{ 35 | input: resolve('src/index.js'), 36 | output: { 37 | name: 'VueRangeSlider', 38 | file: resolve('dist/vue-range-slider.js'), 39 | format: 'umd', 40 | banner 41 | }, 42 | plugins: [ 43 | json(), 44 | babel({ 45 | exclude: 'node_modules/**' 46 | }), 47 | ] 48 | }, { 49 | input: resolve('src/index.js'), 50 | output: { 51 | name: 'VueRangeSlider', 52 | file: resolve('dist/vue-range-slider.esm.js'), 53 | format: 'es', 54 | banner 55 | }, 56 | plugins: [ 57 | json(), 58 | babel({ 59 | exclude: 'node_modules/**' // only transpile our source code 60 | }) 61 | ], 62 | }, { 63 | input: resolve('src/index.js'), 64 | output: { 65 | name: 'VueRangeSlider', 66 | file: resolve('dist/vue-range-slider.min.js'), 67 | format: 'umd', 68 | banner 69 | }, 70 | plugins: [ 71 | json(), 72 | babel({ 73 | exclude: 'node_modules/**' 74 | }) 75 | ] 76 | }] 77 | 78 | function build(builds) { 79 | return new Promise((resolve, reject) => { 80 | let built = 0 81 | const total = builds.length 82 | const next = () => { 83 | buildEntry(builds[built]).then(() => { 84 | built++ 85 | if (built < total) { 86 | next() 87 | } else { 88 | resolve() 89 | } 90 | }).catch(e => { 91 | reject(e) 92 | logError(e) 93 | }) 94 | } 95 | next() 96 | }) 97 | } 98 | 99 | function buildEntry(config) { 100 | const isProd = /min\.js$/.test(config.output.file) 101 | return rollup.rollup(config).then((bundle) => { 102 | bundle.generate(config).then(gen => { 103 | let code = gen.code 104 | if (isProd) { 105 | let minified = (config.banner ? config.banner + '\n' : '') + uglify.minify(code, { 106 | output: { 107 | ascii_only: true, 108 | comments: /^!/ 109 | }, 110 | compress: { 111 | drop_debugger: true, 112 | drop_console: true 113 | } 114 | }).code 115 | return write(config.output.file, minified, true) 116 | } else { 117 | return write(config.output.file, code) 118 | } 119 | }).catch(logError) 120 | }).catch(logError) 121 | } 122 | 123 | function write(dest, code, zip) { 124 | return new Promise((resolve, reject) => { 125 | function report(extra) { 126 | console.log(blue(path.relative(process.cwd(), dest)) + ' ' + getSize(code) + (extra || '')) 127 | resolve() 128 | } 129 | 130 | fs.writeFile(dest, code, (err) => { 131 | if (err) { 132 | return reject(err) 133 | } 134 | if (zip) { 135 | zlib.gzip(code, (err, zipped) => { 136 | if (err) return reject(err) 137 | report(' (gzipped: ' + getSize(zipped) + ')') 138 | }) 139 | } else { 140 | report() 141 | } 142 | }) 143 | }) 144 | } 145 | 146 | function getSize(code) { 147 | return (code.length / 1024).toFixed(2) + 'kb' 148 | } 149 | 150 | function blue(str) { 151 | return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m' 152 | } 153 | 154 | function logError(e) { 155 | console.log(e) 156 | } 157 | 158 | gulp.task('js', async () => await build(builds)) 159 | 160 | 161 | gulp.task('css', () => { 162 | return gulp.src('./src/styl/vue-range-slider.styl') 163 | .pipe(sourcemaps.init()) 164 | .pipe(stylus()) 165 | .pipe(postcss([ 166 | // pxtorem({ 167 | // rootValue: 16, 168 | // unitPrecision: 37.5, 169 | // propList: ['*'] 170 | // }), 171 | autoprefixer() 172 | ])) 173 | .pipe(header('/**\n' + 174 | ' * vue-range-slider v' + version + '\n' + 175 | ' * (c) 2016-' + new Date().getFullYear() + ' xwpongithub\n' + 176 | ' * Released under the MIT License.\n' + 177 | ' */\n')) 178 | .pipe(sourcemaps.write('.')) 179 | .pipe(gulp.dest('./dist')).on('end', () => { 180 | gulp.src('./dist/vue-range-slider.css') 181 | .pipe(sourcemaps.init()) 182 | .pipe(postcss([cssnano()])) 183 | .pipe(rename("vue-range-slider.min.css")) 184 | .pipe(sourcemaps.write('.')) 185 | .pipe(gulp.dest('./dist')).on('end', () => { 186 | const now = new Date() 187 | console.log(`[${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}] Compress css finished`) 188 | }) 189 | }) 190 | }) 191 | 192 | gulp.task('default', ['js', 'css']) 193 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-range-component", 3 | "version": "1.0.3", 4 | "description": "A range slider component based on vue (Vue滑块组件).", 5 | "main": "dist/vue-range-slider.js", 6 | "module": "dist/vue-range-slider.esm.js", 7 | "keywords": [ 8 | "javascript", 9 | "rollup", 10 | "vuejs", 11 | "stylus" 12 | ], 13 | "author": "xwpongithub", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/xwpongithub/vue-range-slider/issues" 17 | }, 18 | "homepage": "https://github.com/xwpongithub/vue-range-slider", 19 | "repository": { 20 | "type": "git", 21 | "url": "git@github.com:xwpongithub/vue-range-slider.git" 22 | }, 23 | "browserslist": [ 24 | "iOS >= 7", 25 | "Android >= 4.0", 26 | "last 2 versions", 27 | "> 1%", 28 | "not ie <= 8" 29 | ], 30 | "scripts": { 31 | "build": "npx gulp" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.1.2", 35 | "@babel/plugin-transform-runtime": "^7.1.0", 36 | "@babel/preset-env": "^7.1.0", 37 | "autoprefixer": "^9.1.5", 38 | "babel-loader": "^8.0.4", 39 | "cssnano": "^4.1.4", 40 | "gulp": "^3.9.1", 41 | "gulp-header": "^2.0.5", 42 | "gulp-postcss": "^8.0.0", 43 | "gulp-rename": "^1.4.0", 44 | "gulp-sourcemaps": "^2.6.4", 45 | "gulp-stylus": "^2.7.0", 46 | "postcss": "^7.0.5", 47 | "postcss-pxtorem": "^4.0.1", 48 | "rollup": "^0.66.6", 49 | "rollup-plugin-babel": "^4.0.3", 50 | "rollup-plugin-json": "^3.1.0", 51 | "stylus": "^0.54.5", 52 | "uglify-js": "^3.4.9", 53 | "zlib": "^1.0.5", 54 | "kind-of": ">=6.0.3", 55 | "lodash":">=4.17.19", 56 | "dot-prop": ">=4.2.1", 57 | "ini": ">=1.3.6" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './js/vue-range-slider' 2 | import {version} from '../package.json' 3 | 4 | Slider.version = version 5 | Slider.install = function(Vue) { 6 | Vue.component(Slider.name, Slider) 7 | } 8 | 9 | if (typeof window !== 'undefined' && window.Vue) { 10 | window.Vue.use(Slider) 11 | } 12 | 13 | export default Slider 14 | -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | // Unsharp text [#166](https://github.com/NightCatSama/vue-slider-component/issues/166) 2 | export const roundToDPR = (function () { 3 | const r = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1 4 | return value => Math.round(value * r) / r 5 | })() 6 | 7 | export const isMobile = (() => { 8 | const userAgentInfo = navigator.userAgent.toLowerCase() 9 | const agents = ["Android", "iPhone", 10 | "SymbianOS", "Windows Phone", 11 | "iPad", "iPod"] 12 | let flag = false 13 | for (let v = 0; v < agents.length; v++) { 14 | if (userAgentInfo.indexOf(agents[v].toLowerCase()) > 0) { 15 | flag = true 16 | break 17 | } 18 | } 19 | return flag 20 | })() 21 | 22 | export function isArray(input) { 23 | if (Array.prototype.isArray) { 24 | return Array.isArray(input) 25 | } 26 | return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]' 27 | } 28 | 29 | export function isDiff(a, b) { 30 | if (Object.prototype.toString.call(a) !== Object.prototype.toString.call(b)) { 31 | return true 32 | } else if (isArray(a) && a.length === b.length) { 33 | return a.some((v, i) => v !== b[i]) 34 | } 35 | return a !== b 36 | } 37 | 38 | let elementStyle = document.createElement('div').style 39 | let vendor = (() => { 40 | let transformNames = { 41 | webkit: 'webkitTransform', 42 | Moz: 'MozTransform', 43 | O: 'OTransform', 44 | ms: 'msTransform', 45 | standard: 'transform' 46 | } 47 | for (let key in transformNames) { 48 | if (elementStyle[transformNames[key]] !== undefined) { 49 | return key 50 | } 51 | } 52 | return false 53 | })() 54 | 55 | export function prefixStyle(style) { 56 | if (vendor === false) { 57 | return false 58 | } 59 | if (vendor === 'standard') { 60 | if (style === 'transitionEnd') { 61 | return 'transitionend' 62 | } 63 | return style 64 | } 65 | return vendor + style.charAt(0).toUpperCase() + style.substr(1) 66 | } 67 | 68 | export function addEvent(el, type, fn, capture) { 69 | el.addEventListener(type, fn, {passive: false, capture: !!capture}) 70 | } 71 | 72 | export function removeEvent(el, type, fn, capture) { 73 | el.removeEventListener(type, fn, {passive: false, capture: !!capture}) 74 | } 75 | -------------------------------------------------------------------------------- /src/js/vue-range-slider.js: -------------------------------------------------------------------------------- 1 | import {roundToDPR, isMobile, isArray, isDiff, prefixStyle, addEvent, removeEvent} from './utils' 2 | 3 | const transform = prefixStyle('transform') 4 | const transitionDuration = prefixStyle('transitionDuration') 5 | const transitionEnd = prefixStyle('transitionEnd') 6 | 7 | const EVENT_TOUCH_START = 'touchstart' 8 | const EVENT_TOUCH_MOVE = 'touchmove' 9 | const EVENT_TOUCH_END = 'touchend' 10 | const EVENT_TOUCH_CANCEL = 'touchcancel' 11 | 12 | const EVENT_MOUSE_DOWN = 'mousedown' 13 | const EVENT_MOUSE_MOVE = 'mousemove' 14 | const EVENT_MOUSE_UP = 'mouseup' 15 | const EVENT_MOUSE_LEAVE = 'mouseleave' 16 | 17 | const EVENT_KEY_DOWN = 'keydown' 18 | const EVENT_KEY_UP = 'keyup' 19 | const EVENT_RESIZE = 'resize' 20 | 21 | export default { 22 | name: 'vue-range-slider', 23 | props: { 24 | // 是否显示组件 25 | show: { 26 | type: Boolean, 27 | default: true 28 | }, 29 | // 值 30 | value: { 31 | type: [String, Number, Array, Object], 32 | default: 0 33 | }, 34 | // 最小值 35 | min: { 36 | type: Number, 37 | default: 0 38 | }, 39 | // 最大值 40 | max: { 41 | type: Number, 42 | default: 100 43 | }, 44 | // 分段间隔 45 | step: { 46 | type: Number, 47 | default: 1 48 | }, 49 | // 组件宽度 50 | width: { 51 | type: [Number, String], 52 | default: 'auto' 53 | }, 54 | // 组件高度 55 | height: { 56 | type: [Number, String], 57 | default: 6 58 | }, 59 | // 滑块大小 60 | dotSize: { 61 | type: Number, 62 | default: 16 63 | }, 64 | dotWidth: { 65 | type: Number, 66 | required: false 67 | }, 68 | dotHeight: { 69 | type: Number, 70 | required: false 71 | }, 72 | stopPropagation: { 73 | type: Boolean, 74 | default: false 75 | }, 76 | // 事件类型 77 | eventType: { 78 | type: String, 79 | default: 'auto' 80 | }, 81 | // 是否实时计算组件布局 82 | realTime: { 83 | type: Boolean, 84 | default: false 85 | }, 86 | // 是否显示工具提示 87 | tooltip: { 88 | type: [String, Boolean], 89 | default: 'always', 90 | validator(val) { 91 | return ['hover', 'always', false].indexOf(val) > -1 92 | } 93 | }, 94 | // 组件方向 95 | direction: { 96 | type: String, 97 | default: 'horizontal', 98 | validator(val) { 99 | return ['horizontal', 'vertical'].indexOf(val) > -1 100 | } 101 | }, 102 | // 是否反向组件 103 | reverse: { 104 | type: Boolean, 105 | default: false 106 | }, 107 | // 是否不可用 108 | disabled: { 109 | type: [Boolean, Array], 110 | default: false 111 | }, 112 | piecewiseLabel: { 113 | type: Boolean, 114 | default: false 115 | }, 116 | piecewise: { 117 | type: Boolean, 118 | default: false 119 | }, 120 | // 进度条是否可拖拽（只限范围模式） 121 | processDraggable: { 122 | type: Boolean, 123 | default: false 124 | }, 125 | // 是否可点击的 126 | clickable: { 127 | type: Boolean, 128 | default: true 129 | }, 130 | // 是否固定距离 131 | fixed: { 132 | type: Boolean, 133 | default: false 134 | }, 135 | // 是否为开发环境（打印错误） 136 | debug: { 137 | type: Boolean, 138 | default: true 139 | }, 140 | // 最小范围 141 | minRange: { 142 | type: Number 143 | }, 144 | // 最大范围 145 | maxRange: { 146 | type: Number 147 | }, 148 | tooltipMerge: { 149 | type: Boolean, 150 | default: true 151 | }, 152 | // 是否开启初始动画 153 | startAnimation: { 154 | type: Boolean, 155 | default: false 156 | }, 157 | // 是否在拖拽结束后同步值 158 | lazy: { 159 | type: Boolean, 160 | default: false 161 | }, 162 | // 在范围模式中，是否允许交叉 163 | enableCross: { 164 | type: Boolean, 165 | default: true 166 | }, 167 | // 动画速度比 168 | speed: { 169 | type: Number, 170 | default: 0.5 171 | }, 172 | useKeyboard: { 173 | type: Boolean, 174 | default: false 175 | }, 176 | actionsKeyboard: { 177 | type: Array, 178 | default() { 179 | return [(i) => i - 1, (i) => i + 1] 180 | } 181 | }, 182 | data: Array, 183 | formatter: [String, Function], 184 | mergeFormatter: [String, Function], 185 | // 工具提示方向 186 | tooltipDir: [Array, String], 187 | // 工具提示样式 188 | tooltipStyle: [Array, Object, Function], 189 | // 滑块样式 190 | sliderStyle: [Array, Object, Function], 191 | // 键盘控制时，算滑块获得焦点时样式 192 | focusStyle: [Array, Object, Function], 193 | // 组件禁用状态下样式 194 | disabledStyle: Object, 195 | // 进度条样式 196 | processStyle: Object, 197 | // 组件背景样式 198 | bgStyle: Object, 199 | piecewiseStyle: Object, 200 | piecewiseActiveStyle: Object, 201 | disabledDotStyle: [Array, Object, Function], 202 | labelStyle: Object, 203 | labelActiveStyle: Object 204 | }, 205 | data() { 206 | return { 207 | currentValue: 0, 208 | size: 0, 209 | fixedValue: 0, 210 | focusSlider: 0, 211 | currentSlider: 0, 212 | flag: false, 213 | processFlag: false, 214 | processSign: false, 215 | keydownFlag: false, 216 | focusFlag: false, 217 | dragFlag: false, 218 | crossFlag: false, 219 | isComponentExists: true, 220 | isMounted: false 221 | } 222 | }, 223 | render(h) { 224 | const sliderConBlocks = [] 225 | 226 | // dot 227 | if (this.isRange) { 228 | const dot0 = h('div', { 229 | ref: 'dot0', 230 | staticClass: 'slider-dot', 231 | class: [this.tooltipStatus, { 232 | 'slider-dot-focus': this.focusFlag && this.focusSlider === 0, 233 | 'slider-dot-dragging': this.flag && this.currentSlider === 0, 234 | 'slider-dot-disabled': !this.boolDisabled && this.disabledArray[0] 235 | }], 236 | style: this.dotStyles 237 | }, [ 238 | this._t('dot', [ 239 | h('div', { 240 | staticClass: 'slider-dot-handle', 241 | style: [ 242 | (!this.boolDisabled && this.disabledArray[0]) ? this.disabledDotStyles[0] : null, 243 | this.sliderStyles[0], 244 | this.focusFlag && this.focusSlider === 0 ? this.focusStyles[0]: null 245 | ] 246 | }) 247 | ], { 248 | index: 0, 249 | value: this.val[0], 250 | disabled: this.disabledArray[0] 251 | }), 252 | h('div', { 253 | ref: 'tooltip0', 254 | staticClass: 'slider-tooltip-wrap', 255 | class: `slider-tooltip-${this.tooltipDirection[0]}` 256 | }, [ 257 | this._t('tooltip', [ 258 | h('span', { 259 | staticClass: 'slider-tooltip', 260 | style: this.tooltipStyles[0] 261 | }, this.formatter ? this.formatting(this.val[0]) : this.val[0]) 262 | ], { 263 | value: this.val[0], 264 | index: 0, 265 | disabled: !this.boolDisabled && this.disabledArray[0] 266 | }) 267 | ]) 268 | ]) 269 | sliderConBlocks.push(dot0) 270 | 271 | const dot1 = h('div', { 272 | ref: 'dot1', 273 | staticClass: 'slider-dot', 274 | class: [this.tooltipStatus, { 275 | 'slider-dot-focus': this.focusFlag && this.focusSlider === 1, 276 | 'slider-dot-dragging': this.flag && this.currentSlider === 1, 277 | 'slider-dot-disabled': !this.boolDisabled && this.disabledArray[1] 278 | }], 279 | style: this.dotStyles 280 | }, [ 281 | this._t('dot', [ 282 | h('div', { 283 | staticClass: 'slider-dot-handle', 284 | style: [ 285 | (!this.boolDisabled && this.disabledArray[1]) ? this.disabledDotStyles[1] : null, 286 | this.sliderStyles[1], 287 | this.focusFlag && this.focusSlider === 1 ? this.focusStyles[1]: null 288 | ] 289 | }) 290 | ], { 291 | index: 1, 292 | value: this.val[1], 293 | disabled: this.disabledArray[1] 294 | }), 295 | h('div', { 296 | ref: 'tooltip1', 297 | staticClass: 'slider-tooltip-wrap', 298 | class: `slider-tooltip-${this.tooltipDirection[1]}` 299 | }, [ 300 | this._t('tooltip', [ 301 | h('span', { 302 | staticClass: 'slider-tooltip', 303 | style: this.tooltipStyles[1] 304 | }, this.formatter ? this.formatting(this.val[1]) : this.val[1]) 305 | ], { 306 | value: this.val[1], 307 | index: 1, 308 | disabled: !this.boolDisabled && this.disabledArray[1] 309 | }) 310 | ]) 311 | ]) 312 | sliderConBlocks.push(dot1) 313 | } else { 314 | const dot = h('div', { 315 | ref: 'dot', 316 | staticClass: 'slider-dot', 317 | class: [ 318 | this.tooltipStatus, 319 | { 320 | 'slider-dot-focus': this.focusFlag && this.focusSlider === 0, 321 | 'slider-dot-dragging': this.flag && this.currentSlider === 0 322 | } 323 | ], 324 | style: this.dotStyles 325 | }, [ 326 | this._t('dot', [ 327 | h('div', { 328 | staticClass: 'slider-dot-handle', 329 | style: [ 330 | this.sliderStyles, 331 | this.focusFlag && this.focusSlider === 0 ? this.focusStyles : null 332 | ] 333 | }) 334 | ], { 335 | value: this.val, 336 | disabled: this.boolDisabled 337 | }), 338 | h('div', { 339 | staticClass: 'slider-tooltip-wrap', 340 | class: `slider-tooltip-${this.tooltipDirection}` 341 | }, [ 342 | this._t('tooltip', [ 343 | h('span', { 344 | staticClass: 'slider-tooltip', 345 | style: this.tooltipStyles 346 | }, 347 | this.formatter ? this.formatting(this.val) : this.val 348 | ) 349 | ], { 350 | value: this.val 351 | }) 352 | ]) 353 | ]) 354 | sliderConBlocks.push(dot) 355 | } 356 | 357 | // piecewise 358 | const dotWrapLen = this.piecewiseDotWrap.length 359 | const ulBlock = h('ul', { 360 | staticClass: 'slider-piecewise' 361 | }, this._l(this.piecewiseDotWrap, (item, i) => { 362 | const piecewiseDot = [] 363 | if (this.piecewise) { 364 | piecewiseDot.push(h('span', { 365 | staticClass: 'piecewise-dot', 366 | style: [this.piecewiseStyle, item.inRange ? this.piecewiseActiveStyle : null] 367 | })) 368 | } 369 | 370 | const piecewiseLabel = [] 371 | if (this.piecewiseLabel) { 372 | piecewiseLabel.push(h('span', { 373 | staticClass: 'piecewise-label', 374 | style: [this.labelStyle, item.inRange ? this.labelActiveStyle : null] 375 | }, item.label)) 376 | } 377 | 378 | return h('li', { 379 | key: i, 380 | staticClass: 'piecewise-item', 381 | style: [this.piecewiseDotStyle, item.style] 382 | }, [ 383 | this._t('piecewise', piecewiseDot , { 384 | label: item.label, 385 | index: i, 386 | first: i === 0, 387 | last: i === dotWrapLen - 1, 388 | active: item.inRange 389 | }), 390 | this._t('label', piecewiseLabel, { 391 | label: item.label, 392 | index: i, 393 | first: i === 0, 394 | last: i === dotWrapLen - 1, 395 | active: item.inRange 396 | }) 397 | ]) 398 | })) 399 | sliderConBlocks.push(ulBlock) 400 | 401 | // process 402 | const processBlock = h('div', { 403 | ref: 'process', 404 | staticClass: 'slider-process', 405 | class: { 406 | 'slider-process-draggable': this.isRange && this.processDraggable 407 | }, 408 | style: this.processStyle, 409 | on: { 410 | click: e => this.processClick(e) 411 | } 412 | }, [ 413 | h('div', { 414 | ref: 'mergedTooltip', 415 | staticClass: 'merged-tooltip slider-tooltip-wrap', 416 | class: `slider-tooltip-${this.isRange ? this.tooltipDirection[0] : this.tooltipDirection}`, 417 | style: this.tooltipMergedPosition 418 | }, [ 419 | this._t('tooltip', [ 420 | h('span', { 421 | staticClass: 'slider-tooltip', 422 | style: this.tooltipStyles 423 | }, this.mergeFormatter ? this.mergeFormatting(this.val[0], this.val[1]) : (this.formatter ? (this.val[0] === this.val[1] ? this.formatting(this.val[0]) : `${this.formatting(this.val[0])} - ${this.formatting(this.val[1])}`) : (this.val[0] === this.val[1] ? this.val[0] : `${this.val[0]} - ${this.val[1]}`)) 424 | ) 425 | ], { 426 | value: this.val, 427 | merge: true 428 | }) 429 | ]) 430 | ]) 431 | sliderConBlocks.push(processBlock) 432 | 433 | // 434 | if (!this.isRange && !this.data) { 435 | sliderConBlocks.push(h('input', { 436 | staticClass: 'slider-input', 437 | attrs: { 438 | type: 'range', 439 | min: this.min, 440 | max: this.max 441 | }, 442 | domProps: { 443 | value: this.val 444 | }, 445 | on: { 446 | input: e => this.val = e.target.value 447 | } 448 | })) 449 | } 450 | 451 | return h('div', { 452 | ref: 'wrap', 453 | staticClass: 'vue-range-slider slider-component', 454 | class: [this.flowDirection, this.disabledClass, this.stateClass, {'slider-has-label': this.piecewiseLabel}], 455 | style: [this.wrapStyles, this.boolDisabled ? this.disabledStyle : null], 456 | directives: [ 457 | { 458 | name: 'show', 459 | value: this.show 460 | } 461 | ], 462 | on: { 463 | click: e => this.wrapClick(e) 464 | } 465 | }, [ 466 | h('div', { 467 | ref: 'elem', 468 | staticClass: 'slider', 469 | style: [this.elemStyles, this.bgStyle], 470 | attrs: { 471 | 'aria-hidden': true 472 | } 473 | }, sliderConBlocks) 474 | ]) 475 | }, 476 | computed: { 477 | val: { 478 | get() { 479 | return this.data ? (this.isRange ? [this.data[this.currentValue[0]], this.data[this.currentValue[1]]] : this.data[this.currentValue]) : this.currentValue 480 | }, 481 | set(val) { 482 | if (this.data) { 483 | if (this.isRange) { 484 | const index0 = this.data.indexOf(val[0]) 485 | const index1 = this.data.indexOf(val[1]) 486 | if (index0 > -1 && index1 > -1) { 487 | this.currentValue = [index0, index1] 488 | } 489 | } else { 490 | const index = this.data.indexOf(val) 491 | if (index > -1) { 492 | this.currentValue = index 493 | } 494 | } 495 | } else { 496 | this.currentValue = val 497 | } 498 | } 499 | }, 500 | currentIndex() { 501 | if (this.isRange) { 502 | return this.data ? this.currentValue : [this.getIndexByValue(this.currentValue[0]), this.getIndexByValue(this.currentValue[1])] 503 | } else { 504 | return this.getIndexByValue(this.currentValue) 505 | } 506 | }, 507 | tooltipMergedPosition() { 508 | if (!this.isMounted) return {} 509 | const tooltipDirection = this.tooltipDirection[0] 510 | const dot0 = this.$refs.dot0 511 | if (dot0) { 512 | let style = {} 513 | if (this.direction === 'vertical') { 514 | style[tooltipDirection] = `-${(this.dotHeightVal / 2) - (this.width / 2) + 9}px` 515 | } else { 516 | style[tooltipDirection] = `-${(this.dotWidthVal / 2) - (this.height / 2) + 9}px` 517 | style['left'] = `50%` 518 | } 519 | return style 520 | } 521 | }, 522 | tooltipDirection() { 523 | const dir = this.tooltipDir || (this.direction === 'vertical' ? 'left' : 'top') 524 | if (isArray(dir)) { 525 | return this.isRange ? dir : dir[1] 526 | } else { 527 | return this.isRange ? [dir, dir] : dir 528 | } 529 | }, 530 | piecewiseDotWrap() { 531 | if (!this.piecewise && !this.piecewiseLabel) { 532 | return false 533 | } 534 | let arr = [] 535 | for (let i = 0; i <= this.total; i++) { 536 | let style = this.direction === 'vertical' ? { 537 | bottom: `${this.gap * i - this.width / 2}px`, 538 | left: 0 539 | } : { 540 | left: `${this.gap * i - this.height / 2}px`, 541 | top: 0 542 | } 543 | let index = this.reverse ? (this.total - i) : i 544 | let label = this.data ? this.data[index] : (this.spacing * index) + this.min 545 | arr.push({ 546 | style, 547 | label: this.formatter ? this.formatting(label) : label, 548 | inRange: index >= this.indexRange[0] && index <= this.indexRange[1] 549 | }) 550 | } 551 | return arr 552 | }, 553 | total() { 554 | if (this.data) { 555 | return this.data.length - 1 556 | } else if (Math.floor((this.maximum - this.minimum) * this.multiple) % (this.step * this.multiple) !== 0) { 557 | this.printError('Prop[step] is illegal, Please make sure that the step can be divisible') 558 | } 559 | return (this.maximum - this.minimum) / this.step 560 | }, 561 | piecewiseDotStyle() { 562 | return this.direction === 'vertical' ? { 563 | width: `${this.width}px`, 564 | height: `${this.width}px` 565 | } : { 566 | width: `${this.height}px`, 567 | height: `${this.height}px` 568 | } 569 | }, 570 | dotStyles() { 571 | return this.direction === 'vertical' ? { 572 | width: `${this.dotWidthVal}px`, 573 | height: `${this.dotHeightVal}px`, 574 | left: `${(-(this.dotWidthVal - this.width) / 2)}px` 575 | } : { 576 | width: `${this.dotWidthVal}px`, 577 | height: `${this.dotHeightVal}px`, 578 | top: `${(-(this.dotHeightVal - this.height) / 2)}px` 579 | } 580 | }, 581 | sliderStyles() { 582 | if (isArray(this.sliderStyle)) { 583 | return this.isRange ? this.sliderStyle : this.sliderStyle[1] 584 | } else if (typeof this.sliderStyle === 'function') { 585 | return this.sliderStyle(this.val, this.currentIndex) 586 | } else { 587 | return this.isRange ? [this.sliderStyle, this.sliderStyle] : this.sliderStyle 588 | } 589 | }, 590 | tooltipStyles() { 591 | if (isArray(this.tooltipStyle)) { 592 | return this.isRange ? this.tooltipStyle : this.tooltipStyle[1] 593 | } else if (typeof this.tooltipStyle === 'function') { 594 | return this.tooltipStyle(this.val, this.currentIndex) 595 | } else { 596 | return this.isRange ? [this.tooltipStyle, this.tooltipStyle] : this.tooltipStyle 597 | } 598 | }, 599 | focusStyles() { 600 | if (isArray(this.focusStyle)) { 601 | return this.isRange ? this.focusStyle : this.focusStyle[1] 602 | } else if (typeof this.focusStyle === 'function') { 603 | return this.focusStyle(this.val, this.currentIndex) 604 | } else { 605 | return this.isRange ? [this.focusStyle, this.focusStyle] : this.focusStyle 606 | } 607 | }, 608 | disabledDotStyles() { 609 | const disabledStyle = this.disabledDotStyle 610 | if (isArray(disabledStyle)) { 611 | return disabledStyle 612 | } else if (typeof disabledStyle === 'function') { 613 | const style = disabledStyle(this.val, this.currentIndex) 614 | return isArray(style) ? style : [style, style] 615 | } else if (disabledStyle) { 616 | return [disabledStyle, disabledStyle] 617 | } else { 618 | return [{ 619 | backgroundColor: '#ccc' 620 | }, { 621 | backgroundColor: '#ccc' 622 | }] 623 | } 624 | }, 625 | elemStyles() { 626 | return this.direction === 'vertical' ? { 627 | width: `${this.width}px`, 628 | height: '100%' 629 | } : { 630 | height: `${this.height}px` 631 | } 632 | }, 633 | wrapStyles() { 634 | return this.direction === 'vertical' ? { 635 | height: typeof this.height === 'number' ? `${this.height}px` : this.height, 636 | padding: `${this.dotHeightVal / 2}px ${this.dotWidthVal / 2}px` 637 | } : { 638 | width: typeof this.width === 'number' ? `${this.width}px` : this.width, 639 | padding: `${this.dotHeightVal / 2}px ${this.dotWidthVal / 2}px` 640 | } 641 | }, 642 | stateClass() { 643 | return { 644 | 'slider-state-process-drag': this.processFlag, 645 | 'slider-state-drag': this.flag && !this.processFlag && !this.keydownFlag, 646 | 'slider-state-focus': this.focusFlag 647 | } 648 | }, 649 | tooltipStatus() { 650 | return this.tooltip === 'hover' && this.flag ? 'slider-always' : this.tooltip ? `slider-${this.tooltip}` : '' 651 | }, 652 | tooltipClass() { 653 | return [`slider-tooltip-${this.tooltipDirection}`, 'slider-tooltip'] 654 | }, 655 | minimum() { 656 | return this.data ? 0 : this.min 657 | }, 658 | maximum() { 659 | return this.data ? (this.data.length - 1) : this.max 660 | }, 661 | multiple() { 662 | const decimals = `${this.step}`.split('.')[1] 663 | return decimals ? Math.pow(10, decimals.length) : 1 664 | }, 665 | indexRange() { 666 | return this.isRange ? this.currentIndex : [0, this.currentIndex] 667 | }, 668 | spacing() { 669 | return this.data ? 1 : this.step 670 | }, 671 | gap() { 672 | return this.size / this.total 673 | }, 674 | dotWidthVal() { 675 | return typeof this.dotWidth === 'number' ? this.dotWidth : this.dotSize 676 | }, 677 | dotHeightVal() { 678 | return typeof this.dotHeight === 'number' ? this.dotHeight : this.dotSize 679 | }, 680 | disabledArray() { 681 | return isArray(this.disabled) ? this.disabled : [this.disabled, this.disabled] 682 | }, 683 | boolDisabled() { 684 | return this.disabledArray.every(b => b === true) 685 | }, 686 | disabledClass() { 687 | return this.boolDisabled ? 'slider-disabled' : '' 688 | }, 689 | flowDirection() { 690 | return `slider-${this.direction + (this.reverse ? '-reverse' : '')}` 691 | }, 692 | isRange() { 693 | return isArray(this.value) 694 | }, 695 | isDisabled() { 696 | return this.eventType === 'none' ? true : this.boolDisabled 697 | }, 698 | isFixed() { 699 | return this.fixed || this.minRange 700 | }, 701 | position() { 702 | return this.isRange ? [(this.currentValue[0] - this.minimum) / this.spacing * this.gap, (this.currentValue[1] - this.minimum) / this.spacing * this.gap] : ((this.currentValue - this.minimum) / this.spacing * this.gap) 703 | }, 704 | limit() { 705 | return this.isRange ? this.isFixed ? [[0, (this.total - this.fixedValue) * this.gap], [this.fixedValue * this.gap, this.size]] : [[0, this.position[1]], [this.position[0], this.size]] : [0, this.size] 706 | }, 707 | valueLimit() { 708 | return this.isRange ? this.isFixed ? [[this.minimum, this.maximum - (this.fixedValue * (this.spacing * this.multiple)) / this.multiple], [this.minimum + (this.fixedValue * (this.spacing * this.multiple)) / this.multiple, this.maximum]] : [[this.minimum, this.currentValue[1]], [this.currentValue[0], this.maximum]] : [this.minimum, this.maximum] 709 | }, 710 | idleSlider() { 711 | return this.currentSlider === 0 ? 1 : 0 712 | }, 713 | slider() { 714 | return this.isRange ? [this.$refs.dot0, this.$refs.dot1] : this.$refs.dot 715 | } 716 | }, 717 | methods: { 718 | setValue(val, noCb, speed) { 719 | if (isDiff(this.val, val)) { 720 | const resetVal = this.limitValue(val) 721 | this.val = this.isRange ? resetVal.concat() : resetVal 722 | this.computedFixedValue() 723 | this.syncValue(noCb) 724 | } 725 | this.$nextTick(() => this.setPosition(speed)) 726 | }, 727 | setIndex(val) { 728 | if (isArray(val) && this.isRange) { 729 | let value 730 | if (this.data) { 731 | value = [this.data[val[0]], this.data[val[1]]] 732 | } else { 733 | value = [this.getValueByIndex(val[0]), this.getValueByIndex(val[1])] 734 | } 735 | this.setValue(value) 736 | } else { 737 | val = this.getValueByIndex(val) 738 | if (this.isRange) { 739 | this.currentSlider = val > ((this.currentValue[1] - this.currentValue[0]) / 2 + this.currentValue[0]) ? 1 : 0 740 | } 741 | this.setCurrentValue(val) 742 | } 743 | }, 744 | wrapClick(e) { 745 | if (this.isDisabled || !this.clickable || this.processFlag || this.dragFlag) return false 746 | const pos = this.getPos(e) 747 | if (this.isRange) { 748 | if (this.disabledArray.every(b => b === false)) { 749 | this.currentSlider = pos > ((this.position[1] - this.position[0]) / 2 + this.position[0]) ? 1 : 0 750 | } else if (this.disabledArray[0]) { 751 | if (pos < this.position[0]) return false 752 | this.currentSlider = 1 753 | } else if (this.disabledArray[1]) { 754 | if (pos > this.position[1]) return false 755 | this.currentSlider = 0 756 | } 757 | } 758 | if (this.disabledArray[this.currentSlider]) { 759 | return false 760 | } 761 | this.setValueOnPos(pos) 762 | if (this.isRange && this.tooltipMerge) { 763 | const timer = setInterval(this.handleOverlapTooltip, 16.7) 764 | setTimeout(() => window.clearInterval(timer), this.speed * 1000) 765 | } 766 | }, 767 | processClick(e) { 768 | if (this.fixed) e.stopPropagation() 769 | }, 770 | syncValue(noCb) { 771 | let val = this.isRange ? this.val.concat() : this.val 772 | this.$emit('input', val) 773 | this.keydownFlag && this.$emit('on-keypress', val) 774 | noCb || this.$emit('slide-end', val) 775 | }, 776 | getPos(e) { 777 | this.realTime && this.getStaticData() 778 | return this.direction === 'vertical' ? (this.reverse ? (e.pageY - this.offset) : (this.size - (e.pageY - this.offset))) : (this.reverse ? (this.size - (e.pageX - this.offset)) : (e.pageX - this.offset)) 779 | }, 780 | setValueOnPos(pos, isDrag) { 781 | const range = this.isRange ? this.limit[this.currentSlider] : this.limit 782 | const valueRange = this.isRange ? this.valueLimit[this.currentSlider] : this.valueLimit 783 | const index = Math.round(pos / this.gap) 784 | if (pos >= range[0] && pos <= range[1]) { 785 | const v = this.getValueByIndex(index) 786 | this.setTransform(pos) 787 | this.setCurrentValue(v, isDrag) 788 | if (this.isRange && (this.fixed || this.isLessRange(pos, index))) { 789 | this.setTransform(pos + ((this.fixedValue * this.gap) * (this.currentSlider === 0 ? 1 : -1)), true) 790 | this.setCurrentValue((v * this.multiple + (this.fixedValue * this.spacing * this.multiple * (this.currentSlider === 0 ? 1 : -1))) / this.multiple, isDrag, true) 791 | } 792 | } else { 793 | const anotherSlider = pos < range[0] ? 0 : 1 794 | const currentSlider = anotherSlider === 0 ? 1 : 0 795 | this.setTransform(range[anotherSlider]) 796 | this.setCurrentValue(valueRange[anotherSlider]) 797 | if (this.isRange && (this.fixed || this.isLessRange(pos, index))) { 798 | this.setTransform(this.limit[this.idleSlider][anotherSlider], true) 799 | this.setCurrentValue(this.valueLimit[this.idleSlider][anotherSlider], isDrag, true) 800 | } else if (this.isRange && (this.enableCross || this.crossFlag) && !this.isFixed && !this.disabledArray[anotherSlider] && this.currentSlider === currentSlider) { 801 | this.focusSlider = anotherSlider 802 | this.currentSlider = anotherSlider 803 | } 804 | } 805 | this.crossFlag = false 806 | }, 807 | setCurrentValue(val, isDrag, isIdleSlider) { 808 | const slider = isIdleSlider ? this.idleSlider : this.currentSlider 809 | if (val < this.minimum || val > this.maximum) return false 810 | if (this.isRange) { 811 | if (isDiff(this.currentValue[slider], val)) { 812 | this.currentValue.splice(slider, 1, val) 813 | if (!this.lazy || !this.flag) { 814 | this.syncValue() 815 | } 816 | } 817 | } else if (isDiff(this.currentValue, val)) { 818 | this.currentValue = val 819 | if (!this.lazy || !this.flag) { 820 | this.syncValue() 821 | } 822 | } 823 | isDrag || this.setPosition() 824 | }, 825 | setPosition(speed) { 826 | this.flag || this.setTransitionTime(speed === undefined ? this.speed : speed) 827 | if (this.isRange) { 828 | this.setTransform(this.position[0], this.currentSlider === 1) 829 | this.setTransform(this.position[1], this.currentSlider === 0) 830 | } else { 831 | this.setTransform(this.position) 832 | } 833 | this.flag || this.setTransitionTime(0) 834 | }, 835 | setTransform(val, isIdleSlider) { 836 | const slider = isIdleSlider ? this.idleSlider : this.currentSlider 837 | const value = roundToDPR((this.direction === 'vertical' ? ((this.dotHeightVal / 2) - val) : (val - (this.dotWidthVal / 2))) * (this.reverse ? -1 : 1)) 838 | const translateValue = this.direction === 'vertical' ? `translateY(${value}px)` : `translateX(${value}px)` 839 | const processSize = this.fixed ? `${this.fixedValue * this.gap}px` : `${slider === 0 ? this.position[1] - val : val - this.position[0]}px` 840 | const processPos = this.fixed ? `${slider === 0 ? val : (val - this.fixedValue * this.gap)}px` : `${slider === 0 ? val : this.position[0]}px` 841 | if (this.isRange) { 842 | this.slider[slider].style[transform] = translateValue 843 | if (this.direction === 'vertical') { 844 | this.$refs.process.style.height = processSize 845 | this.$refs.process.style[this.reverse ? 'top' : 'bottom'] = processPos 846 | } else { 847 | this.$refs.process.style.width = processSize 848 | this.$refs.process.style[this.reverse ? 'right' : 'left'] = processPos 849 | } 850 | } else { 851 | this.slider.style[transform] = translateValue 852 | if (this.direction === 'vertical') { 853 | this.$refs.process.style.height = `${val}px` 854 | this.$refs.process.style[this.reverse ? 'top' : 'bottom'] = 0 855 | } else { 856 | this.$refs.process.style.width = `${val}px` 857 | this.$refs.process.style[this.reverse ? 'right' : 'left'] = 0 858 | } 859 | } 860 | }, 861 | setTransitionTime(time) { 862 | // In order to avoid browser merge style and modify together 863 | time || this.$refs.process.offsetWidth 864 | if (this.isRange) { 865 | const sliderLen = this.slider.length 866 | for (let i = 0; i < sliderLen; i++) { 867 | this.slider[i].style[transitionDuration] = `${time}s` 868 | } 869 | this.$refs.process.style[transitionDuration] = `${time}s` 870 | } else { 871 | this.slider.style[transitionDuration] = `${time}s` 872 | this.$refs.process.style[transitionDuration] = `${time}s` 873 | } 874 | }, 875 | computedFixedValue() { 876 | if (!this.isFixed) { 877 | this.fixedValue = 0 878 | return false 879 | } 880 | this.fixedValue = this.currentIndex[1] - this.currentIndex[0] 881 | this.fixedValue = Math.max(this.fixed ? this.currentIndex[1] - this.currentIndex[0] : 0, this.minRange || 0) 882 | }, 883 | limitValue(val) { 884 | if (this.data) { 885 | return val 886 | } 887 | const inRange = v => { 888 | if (v < this.min) { 889 | this.printError(`The value of the slider is ${val}, the minimum value is ${this.min}, the value of this slider can not be less than the minimum value`) 890 | return this.min 891 | } else if (v > this.max) { 892 | this.printError(`The value of the slider is ${val}, the maximum value is ${this.max}, the value of this slider can not be greater than the maximum value`) 893 | return this.max 894 | } 895 | return v 896 | } 897 | if (this.isRange) { 898 | return val.map(v => inRange(v)) 899 | } else { 900 | return inRange(val) 901 | } 902 | }, 903 | getStaticData() { 904 | if (this.$refs.elem) { 905 | this.size = this.direction === 'vertical' ? this.$refs.elem.offsetHeight : this.$refs.elem.offsetWidth 906 | this.offset = this.direction === 'vertical' ? (this.$refs.elem.getBoundingClientRect().top + window.pageYOffset || document.documentElement.scrollTop) : this.$refs.elem.getBoundingClientRect().left 907 | } 908 | }, 909 | handleOverlapTooltip () { 910 | const isDirectionSame = this.tooltipDirection[0] === this.tooltipDirection[1] 911 | if (this.isRange && isDirectionSame) { 912 | const tooltip0 = this.reverse ? this.$refs.tooltip1 : this.$refs.tooltip0 913 | const tooltip1 = this.reverse ? this.$refs.tooltip0 : this.$refs.tooltip1 914 | const tooltip0Rect = tooltip0.getBoundingClientRect() 915 | const tooltip1Rect = tooltip1.getBoundingClientRect() 916 | 917 | const tooltip0Right = tooltip0Rect.right 918 | const tooltip1Left = tooltip1Rect.left 919 | 920 | const tooltip0Y = tooltip0Rect.top 921 | const tooltip1Y = tooltip1Rect.top + tooltip1Rect.height 922 | 923 | const horizontalOverlap = this.direction === 'horizontal' && tooltip0Right > tooltip1Left 924 | const verticalOverlap = this.direction === 'vertical' && tooltip1Y > tooltip0Y 925 | 926 | if (horizontalOverlap || verticalOverlap) { 927 | this.handleDisplayMergedTooltip(true) 928 | } else { 929 | this.handleDisplayMergedTooltip(false) 930 | } 931 | } 932 | }, 933 | handleDisplayMergedTooltip (show) { 934 | const tooltip0 = this.$refs.tooltip0 935 | const tooltip1 = this.$refs.tooltip1 936 | const mergedTooltip = this.$refs.process.getElementsByClassName('merged-tooltip')[0] 937 | if (show) { 938 | tooltip0.style.visibility = 'hidden' 939 | tooltip1.style.visibility = 'hidden' 940 | mergedTooltip.style.visibility = 'visible' 941 | } else { 942 | tooltip0.style.visibility = 'visible' 943 | tooltip1.style.visibility = 'visible' 944 | mergedTooltip.style.visibility = 'hidden' 945 | } 946 | }, 947 | isLessRange(pos, index) { 948 | if (!this.isRange || (!this.minRange && !this.maxRange)) { 949 | return false 950 | } 951 | const diff = this.currentSlider === 0 ? this.currentIndex[1] - index : index - this.currentIndex[0] 952 | if (this.minRange && diff <= this.minRange) { 953 | this.fixedValue = this.minRange 954 | return true 955 | } 956 | if (this.maxRange && diff >= this.maxRange) { 957 | this.fixedValue = this.maxRange 958 | return true 959 | } 960 | this.computedFixedValue() 961 | return false 962 | }, 963 | getValueByIndex(index) { 964 | return ((this.spacing * this.multiple) * index + (this.minimum * this.multiple)) / this.multiple 965 | }, 966 | getIndexByValue(value) { 967 | return Math.round((value - this.minimum) * this.multiple) / (this.spacing * this.multiple) 968 | }, 969 | formatting(value) { 970 | return typeof this.formatter === 'string' ? this.formatter.replace(/{value}/, value) : this.formatter(value) 971 | }, 972 | mergeFormatting(value1, value2) { 973 | return typeof this.mergeFormatter === 'string' ? this.mergeFormatter.replace(/{(value1|value2)}/g, (_, key) => key === 'value1' ? value1 : value2) : this.mergeFormatter(value1, value2) 974 | }, 975 | _start(e, index = 0, isProcess) { 976 | if (this.disabledArray[index]) { 977 | return false 978 | } 979 | if (this.stopPropagation) { 980 | e.stopPropagation() 981 | } 982 | if (this.isRange) { 983 | this.currentSlider = index 984 | if (isProcess) { 985 | if (!this.processDraggable) { 986 | return false 987 | } 988 | this.processFlag = true 989 | this.processSign = { 990 | pos: this.position, 991 | start: this.getPos((e.targetTouches && e.targetTouches[0]) ? e.targetTouches[0] : e) 992 | } 993 | } 994 | if (!this.enableCross && this.val[0] === this.val[1]) { 995 | this.crossFlag = true 996 | } 997 | } 998 | if (!isProcess && this.useKeyboard) { 999 | this.focusFlag = true 1000 | this.focusSlider = index 1001 | } 1002 | this.flag = true 1003 | this.$emit('drag-start', this) 1004 | }, 1005 | _move(e) { 1006 | // e.preventDefault() // NOTE: COMMENTED, BREAKS SELECTING THINGS ON PAGE 1007 | if (this.stopPropagation) { 1008 | e.stopPropagation() 1009 | } 1010 | if (!this.flag) return false 1011 | if (e.targetTouches && e.targetTouches[0]) e = e.targetTouches[0] 1012 | if (this.processFlag) { 1013 | this.currentSlider = 0 1014 | this.setValueOnPos(this.processSign.pos[0] + this.getPos(e) - this.processSign.start, true) 1015 | this.currentSlider = 1 1016 | this.setValueOnPos(this.processSign.pos[1] + this.getPos(e) - this.processSign.start, true) 1017 | } else { 1018 | this.dragFlag = true 1019 | this.setValueOnPos(this.getPos(e), true) 1020 | } 1021 | if (this.isRange && this.tooltipMerge) { 1022 | this.handleOverlapTooltip() 1023 | } 1024 | }, 1025 | _end(e) { 1026 | if (this.stopPropagation) { 1027 | e.stopPropagation() 1028 | } 1029 | if (this.flag) { 1030 | this.$emit('drag-end', this) 1031 | if (this.lazy && isDiff(this.val, this.value)) { 1032 | this.syncValue() 1033 | } 1034 | } else { 1035 | return false 1036 | } 1037 | this.flag = false 1038 | this.$nextTick(() => { 1039 | this.crossFlag = false 1040 | this.dragFlag = false 1041 | this.processFlag = false 1042 | }) 1043 | this.setPosition() 1044 | }, 1045 | blurSlider(e) { 1046 | const dot = this.isRange ? this.$refs[`dot${this.focusSlider}`] : this.$refs.dot 1047 | if (!dot || dot === e.target || dot.contains(e.target)) { 1048 | return false 1049 | } 1050 | this.focusFlag = false 1051 | }, 1052 | handleKeydown(e) { 1053 | if (!this.useKeyboard) { 1054 | return false 1055 | } 1056 | const keyCode = e.which || e.keyCode 1057 | switch (keyCode) { 1058 | case 37: 1059 | case 40: 1060 | e.preventDefault() 1061 | // e.stopPropagation() 1062 | this.keydownFlag = true 1063 | this.flag = true 1064 | this.changeFocusSlider(this.actionsKeyboard[0]) 1065 | break 1066 | case 38: 1067 | case 39: 1068 | e.preventDefault() 1069 | // e.stopPropagation() 1070 | this.keydownFlag = true 1071 | this.flag = true 1072 | this.changeFocusSlider(this.actionsKeyboard[1]) 1073 | break 1074 | default: 1075 | break 1076 | } 1077 | }, 1078 | handleKeyup() { 1079 | if (this.keydownFlag) { 1080 | this.keydownFlag = false 1081 | this.flag = false 1082 | } 1083 | }, 1084 | changeFocusSlider(fn) { 1085 | if (this.isRange) { 1086 | let arr = this.currentIndex.map((index, i) => { 1087 | if (i === this.focusSlider || this.fixed) { 1088 | const val = fn(index) 1089 | const range = this.fixed ? this.valueLimit[i] : [0, this.total] 1090 | if (val <= range[1] && val >= range[0]) { 1091 | return val 1092 | } 1093 | } 1094 | return index 1095 | }) 1096 | if (arr[0] > arr[1]) { 1097 | this.focusSlider = this.focusSlider === 0 ? 1 : 0 1098 | arr = arr.reverse() 1099 | } 1100 | this.setIndex(arr) 1101 | } else { 1102 | this.setIndex(fn(this.currentIndex)) 1103 | } 1104 | }, 1105 | bindEvents() { 1106 | const me = this 1107 | this.processStartFn = function(e) { 1108 | me._start(e, 0, true) 1109 | } 1110 | this.dot0StartFn = function(e) { 1111 | me._start(e, 0) 1112 | } 1113 | this.dot1StartFn = function(e) { 1114 | me._start(e, 1) 1115 | } 1116 | if (isMobile) { 1117 | addEvent(this.$refs.process, EVENT_TOUCH_START, this.processStartFn) 1118 | 1119 | addEvent(document, EVENT_TOUCH_MOVE, this._move) 1120 | addEvent(document, EVENT_TOUCH_END, this._end) 1121 | addEvent(document, EVENT_TOUCH_CANCEL, this._end) 1122 | 1123 | if (this.isRange) { 1124 | addEvent(this.$refs.dot0, EVENT_TOUCH_START, this.dot0StartFn) 1125 | addEvent(this.$refs.dot1, EVENT_TOUCH_START, this.dot1StartFn) 1126 | } else { 1127 | addEvent(this.$refs.dot, EVENT_TOUCH_START, this._start) 1128 | } 1129 | } else { 1130 | addEvent(this.$refs.process, EVENT_MOUSE_DOWN, this.processStartFn) 1131 | 1132 | addEvent(document, EVENT_MOUSE_DOWN, this.blurSlider) 1133 | addEvent(document, EVENT_MOUSE_MOVE, this._move) 1134 | addEvent(document, EVENT_MOUSE_UP, this._end) 1135 | addEvent(document, EVENT_MOUSE_LEAVE, this._end) 1136 | 1137 | if (this.isRange) { 1138 | addEvent(this.$refs.dot0, EVENT_MOUSE_DOWN, this.dot0StartFn) 1139 | addEvent(this.$refs.dot1, EVENT_MOUSE_DOWN, this.dot1StartFn) 1140 | } else { 1141 | addEvent(this.$refs.dot, EVENT_MOUSE_DOWN, this._start) 1142 | } 1143 | } 1144 | addEvent(document, EVENT_KEY_DOWN, this.handleKeydown) 1145 | addEvent(document, EVENT_KEY_UP, this.handleKeyup) 1146 | addEvent(window, EVENT_RESIZE, this.refresh) 1147 | if (this.isRange && this.tooltipMerge) { 1148 | addEvent(this.$refs.dot0, transitionEnd, this.handleOverlapTooltip) 1149 | addEvent(this.$refs.dot1, transitionEnd, this.handleOverlapTooltip) 1150 | } 1151 | }, 1152 | unbindEvents() { 1153 | if (isMobile) { 1154 | removeEvent(this.$refs.process, EVENT_TOUCH_START, this.processStartFn) 1155 | removeEvent(document, EVENT_TOUCH_MOVE, this._move) 1156 | removeEvent(document, EVENT_TOUCH_END, this._end) 1157 | removeEvent(document, EVENT_TOUCH_CANCEL, this._end) 1158 | 1159 | if (this.isRange) { 1160 | removeEvent(this.$refs.dot0, EVENT_TOUCH_START, this.dot0StartFn) 1161 | removeEvent(this.$refs.dot1, EVENT_TOUCH_START, this.dot1StartFn) 1162 | } else { 1163 | removeEvent(this.$refs.dot, EVENT_TOUCH_START, this._start) 1164 | } 1165 | } else { 1166 | removeEvent(this.$refs.process, EVENT_MOUSE_DOWN, this.processStartFn) 1167 | removeEvent(document, EVENT_MOUSE_DOWN, this.blurSlider) 1168 | removeEvent(document, EVENT_MOUSE_MOVE, this._move) 1169 | removeEvent(document, EVENT_MOUSE_UP, this._end) 1170 | removeEvent(document, EVENT_MOUSE_LEAVE, this._end) 1171 | 1172 | if (this.isRange) { 1173 | removeEvent(this.$refs.dot0, EVENT_MOUSE_DOWN, this.dot0StartFn) 1174 | removeEvent(this.$refs.dot1, EVENT_MOUSE_DOWN, this.dot1StartFn) 1175 | } else { 1176 | removeEvent(this.$refs.dot, EVENT_MOUSE_DOWN, this._start) 1177 | } 1178 | } 1179 | removeEvent(document, EVENT_KEY_DOWN, this.handleKeydown) 1180 | removeEvent(document, EVENT_KEY_UP, this.handleKeyup) 1181 | removeEvent(window, EVENT_RESIZE, this.refresh) 1182 | if (this.isRange && this.tooltipMerge) { 1183 | removeEvent(this.$refs.dot0, transitionEnd, this.handleOverlapTooltip) 1184 | removeEvent(this.$refs.dot1, transitionEnd, this.handleOverlapTooltip) 1185 | } 1186 | }, 1187 | refresh() { 1188 | if (this.$refs.elem) { 1189 | this.getStaticData() 1190 | this.computedFixedValue() 1191 | this.setPosition() 1192 | this.unbindEvents() 1193 | this.bindEvents() 1194 | } 1195 | }, 1196 | printError(msg) { 1197 | if (this.debug) { 1198 | console.error(`[VueSlider error]: ${msg}`) 1199 | } 1200 | } 1201 | }, 1202 | mounted() { 1203 | this.isComponentExists = true 1204 | if (typeof window === 'undefined' || typeof document === 'undefined') { 1205 | return this.printError('window or document is undefined, can not be initialization.') 1206 | } 1207 | this.$nextTick(() => { 1208 | this.getStaticData() 1209 | this.setValue(this.limitValue(this.value), true, this.startAnimation ? this.speed : 0) 1210 | this.bindEvents() 1211 | if (this.isRange && this.tooltipMerge && !this.startAnimation) { 1212 | this.handleOverlapTooltip() 1213 | } 1214 | }) 1215 | this.isMounted = true 1216 | }, 1217 | watch: { 1218 | value(val) { 1219 | this.flag || this.setValue(val, true) 1220 | }, 1221 | show(bool) { 1222 | if (bool && !this.size) { 1223 | this.$nextTick(this.refresh) 1224 | } 1225 | }, 1226 | max(val) { 1227 | if (val < this.min) { 1228 | return this.printError('The maximum value can not be less than the minimum value.') 1229 | } 1230 | const resetVal = this.limitValue(this.val) 1231 | this.setValue(resetVal) 1232 | this.refresh() 1233 | }, 1234 | min(val) { 1235 | if (val > this.max) { 1236 | return this.printError('The minimum value can not be greater than the maximum value.') 1237 | } 1238 | const resetVal = this.limitValue(this.val) 1239 | this.setValue(resetVal) 1240 | this.refresh() 1241 | }, 1242 | fixed() { 1243 | this.computedFixedValue() 1244 | }, 1245 | minRange() { 1246 | this.computedFixedValue() 1247 | } 1248 | }, 1249 | beforeDestroy() { 1250 | this.isComponentExists = false 1251 | this.unbindEvents() 1252 | this.refresh() 1253 | }, 1254 | deactivated() { 1255 | this.isComponentExists = false 1256 | this.unbindEvents() 1257 | this.refresh() 1258 | } 1259 | } 1260 | -------------------------------------------------------------------------------- /src/styl/vue-range-slider.styl: -------------------------------------------------------------------------------- 1 | .vue-range-slider 2 | &.slider-component 3 | position: relative 4 | box-sizing: border-box 5 | user-select: none 6 | .slider 7 | position: relative 8 | display: block 9 | border-radius: 15px 10 | background-color: #ccc 11 | &::after 12 | content: '' 13 | position: absolute 14 | left: 0 15 | top: 0 16 | width: 100% 17 | height: 100% 18 | z-index: 2 19 | .slider-dot 20 | position: absolute 21 | transition: all 0s 22 | will-change: transform 23 | cursor: pointer 24 | z-index: 5 25 | .slider-dot-handle 26 | width: 100% 27 | height: 100% 28 | border-radius: 50% 29 | background-color: #fff 30 | box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32) 31 | &.slider-dot-focus 32 | .slider-dot-handle 33 | box-shadow: 0 0 2px 1px #3498db 34 | &.slider-dot-dragging 35 | z-index: 5 36 | &.slider-dot-disabled 37 | z-index: 4 38 | &.slider-hover 39 | &:hover 40 | .slider-tooltip-wrap 41 | display: block 42 | &.slider-always 43 | .slider-tooltip-wrap 44 | display: block!important 45 | .slider-process 46 | position: absolute 47 | border-radius: 15px 48 | background-color: #3498db 49 | z-index: 1 50 | &.slider-process-draggable 51 | cursor: pointer 52 | z-index: 3 53 | .slider-input 54 | position: absolute 55 | overflow: hidden 56 | height: 1px 57 | width: 1px 58 | clip: rect(1px, 1px, 1px, 1px) 59 | .slider-piecewise 60 | position: absolute 61 | width: 100% 62 | padding: 0 63 | margin: 0 64 | left: 0 65 | top: 0 66 | height: 100% 67 | list-style: none 68 | .piecewise-item 69 | position: absolute 70 | width: 8px 71 | height: 8px 72 | &:first-child,&:last-child 73 | .piecewise-dot 74 | visibility: hidden 75 | .piecewise-dot 76 | position: absolute 77 | left: 50% 78 | top: 50% 79 | width: 100% 80 | height: 100% 81 | display: inline-block 82 | background-color: rgba(0, 0, 0, 0.16) 83 | border-radius: 50% 84 | transform: translate(-50%, -50%) 85 | z-index: 2 86 | transition: all .3s 87 | &.slider-horizontal 88 | .slider-dot 89 | left:0 90 | .slider-process 91 | width: 0 92 | height: 100% 93 | top: 0 94 | left: 0 95 | will-change: width 96 | &.slider-vertical 97 | .slider-dot 98 | bottom:0 99 | .slider-process 100 | width: 100% 101 | height: 0 102 | bottom: 0 103 | left: 0 104 | will-change: height 105 | &.slider-horizontal-reverse 106 | .slider-dot 107 | right:0 108 | .slider-process 109 | width: 0 110 | height: 100% 111 | top: 0 112 | right: 0 113 | &.slider-vertical-reverse 114 | .slider-dot 115 | top:0 116 | .slider-process 117 | width: 100% 118 | height: 0 119 | top: 0 120 | left: 0 121 | &.slider-horizontal,&.slider-horizontal-reverse 122 | .slider-piecewise 123 | .piecewise-item 124 | .piecewise-label 125 | position: absolute 126 | display: inline-block 127 | top: 100% 128 | left: 50% 129 | white-space: nowrap 130 | font-size: 12px 131 | color: #333 132 | transform: translate(-50%, 8px) 133 | visibility: visible 134 | &.slider-vertical,&.slider-vertical-reverse 135 | .slider-piecewise 136 | .piecewise-item 137 | .piecewise-label 138 | position: absolute 139 | display: inline-block 140 | top: 50% 141 | left: 100% 142 | white-space: nowrap 143 | font-size: 12px 144 | color: #333 145 | transform: translate(8px, -50%) 146 | visibility: visible 147 | .slider-tooltip-wrap 148 | display: none 149 | position: absolute 150 | z-index: 9 151 | &.merged-tooltip 152 | display:block 153 | visibility:hidden 154 | &.slider-tooltip-top 155 | top: -9px 156 | left: 50% 157 | transform: translate(-50%, -100%) 158 | .slider-tooltip::before 159 | content: '' 160 | position: absolute 161 | bottom: -10px 162 | left: 50% 163 | width: 0 164 | height: 0 165 | border: 5px solid transparent 166 | border-top-color: inherit 167 | transform: translate(-50%, 0) 168 | &.slider-tooltip-bottom 169 | bottom: -9px; 170 | left: 50%; 171 | transform: translate(-50%, 100%) 172 | .slider-tooltip::before 173 | content: '' 174 | position: absolute 175 | top: -10px 176 | left: 50% 177 | width: 0 178 | height: 0 179 | border: 5px solid transparent 180 | border-bottom-color: inherit 181 | transform: translate(-50%, 0) 182 | &.slider-tooltip-left 183 | top: 50% 184 | left: -9px 185 | transform: translate(-100%, -50%) 186 | .slider-tooltip::before 187 | content: '' 188 | position: absolute 189 | top: 50% 190 | right: -10px 191 | width: 0 192 | height: 0 193 | border: 5px solid transparent 194 | border-left-color: inherit 195 | transform: translate(0, -50%) 196 | &.slider-tooltip-right 197 | top: 50% 198 | right: -9px 199 | transform: translate(100%, -50%) 200 | .slider-tooltip::before 201 | content: '' 202 | position: absolute 203 | top: 50% 204 | left: -10px 205 | width: 0 206 | height: 0 207 | border: 5px solid transparent 208 | border-right-color: inherit 209 | transform: translate(0, -50%) 210 | &.merged-tooltip 211 | display: block 212 | visibility: hidden 213 | .slider-tooltip 214 | display: block 215 | font-size: 14px 216 | white-space: nowrap 217 | padding: 2px 5px 218 | min-width: 20px 219 | text-align: center 220 | color: #fff 221 | border-radius: 5px 222 | border: 1px solid #3498db 223 | background-color: #3498db 224 | &.slider-disabled 225 | opacity: .5 226 | cursor: not-allowed 227 | .slider-dot 228 | cursor: not-allowed 229 | &.slider-has-label 230 | margin-bottom: 15px 231 | --------------------------------------------------------------------------------