├── .babelrc ├── static └── images │ ├── exam1.png │ ├── exam2.png │ ├── exam3.png │ ├── exam4.png │ └── rectangle-slider.svg ├── example ├── main.js └── App.vue ├── .editorconfig ├── bili.config.js ├── .npmignore ├── .gitignore ├── index.html ├── LICENSE ├── package.json ├── webpack.config.js ├── README.md └── src └── index.vue /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /static/images/exam1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biigpongsatorn/vue-slide-bar/HEAD/static/images/exam1.png -------------------------------------------------------------------------------- /static/images/exam2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biigpongsatorn/vue-slide-bar/HEAD/static/images/exam2.png -------------------------------------------------------------------------------- /static/images/exam3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biigpongsatorn/vue-slide-bar/HEAD/static/images/exam3.png -------------------------------------------------------------------------------- /static/images/exam4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biigpongsatorn/vue-slide-bar/HEAD/static/images/exam4.png -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 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 | -------------------------------------------------------------------------------- /bili.config.js: -------------------------------------------------------------------------------- 1 | const vue = require('rollup-plugin-vue'); 2 | 3 | module.exports = { 4 | banner: true, 5 | format: ['umd-min'], 6 | css: true, 7 | plugins: [ 8 | vue({ css: true }) 9 | ], 10 | outDir: 'lib' 11 | }; 12 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example/ 2 | dist/ 3 | node_modules/ 4 | src/ 5 | static/ 6 | .babelrc 7 | .editorconfig 8 | .gitignore 9 | bili.config.js 10 | index.html 11 | npm-debug.log 12 | webpack.config.js 13 | 14 | .eslintignore 15 | .eslintrc.js 16 | yarn.lock -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | lib/ 5 | npm-debug.log 6 | yarn-error.log 7 | .npmignore 8 | .editorconfig 9 | 10 | # Editor directories and files 11 | .idea 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | 17 | yarn.lock 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-slide-bar 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /static/images/rectangle-slider.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Pongsatorn 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-slide-bar", 3 | "description": "Simple Vue Slide Bar Component", 4 | "version": "1.2.0", 5 | "author": "biig_pongsatorn ", 6 | "license": "MIT", 7 | "main": "lib/vue-slide-bar.min.js", 8 | "files": [ 9 | "lib" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/biigpongsatorn/vue-slide-bar.git" 14 | }, 15 | "scripts": { 16 | "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --open --hot", 17 | "build:lib": "rm -rf ./lib && bili src/index.vue", 18 | "build:example": "rm -rf ./dist && cross-env NODE_ENV=production webpack --mode production --progress --hide-modules", 19 | "prepublish": "npm run build:lib" 20 | }, 21 | "dependencies": { 22 | "vue": "^2.5.22" 23 | }, 24 | "browserslist": [ 25 | "> 1%", 26 | "last 2 versions", 27 | "not ie <= 8" 28 | ], 29 | "devDependencies": { 30 | "@babel/core": "^7.2.2", 31 | "@babel/preset-env": "^7.2.3", 32 | "babel-loader": "^8.0.5", 33 | "bili": "^3.4.2", 34 | "cross-env": "^5.2.0", 35 | "css-loader": "^2.1.0", 36 | "file-loader": "^3.0.1", 37 | "rollup-plugin-vue": "^4.6.1", 38 | "uglifyjs-webpack-plugin": "^2.1.1", 39 | "vue-loader": "^15.5.1", 40 | "vue-template-compiler": "^2.5.22", 41 | "webpack": "^4.28.4", 42 | "webpack-cli": "^3.2.1", 43 | "webpack-dev-server": ">=3.1.11" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin'); 5 | 6 | module.exports = { 7 | entry: './example/main.js', 8 | output: { 9 | path: path.resolve(__dirname, './dist'), 10 | publicPath: '/dist', 11 | filename: 'build.js' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.css$/, 17 | use: [ 18 | 'vue-style-loader', 19 | 'css-loader' 20 | ], 21 | }, 22 | { 23 | test: /\.vue$/, 24 | loader: 'vue-loader', 25 | options: { 26 | loaders: { 27 | } 28 | // other vue-loader options go here 29 | } 30 | }, 31 | { 32 | test: /\.js$/, 33 | loader: 'babel-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.(png|jpg|gif|svg)$/, 38 | loader: 'file-loader', 39 | options: { 40 | name: '[name].[ext]?[hash]' 41 | } 42 | } 43 | ] 44 | }, 45 | resolve: { 46 | alias: { 47 | 'vue$': 'vue/dist/vue.esm.js' 48 | }, 49 | extensions: ['*', '.js', '.vue', '.json'] 50 | }, 51 | optimization: { 52 | minimizer: [ 53 | new UglifyJsPlugin({ 54 | sourceMap: true, 55 | parallel: 4, 56 | uglifyOptions: { 57 | warnings: false, 58 | compress: { 59 | warnings: false 60 | }, 61 | }, 62 | }) 63 | ] 64 | }, 65 | plugins: [ 66 | new VueLoaderPlugin(), 67 | ], 68 | devServer: { 69 | historyApiFallback: true, 70 | noInfo: true, 71 | overlay: true 72 | }, 73 | performance: { 74 | hints: false 75 | }, 76 | devtool: '#eval-source-map' 77 | }; 78 | 79 | if (process.env.NODE_ENV === 'production') { 80 | module.exports.devtool = '#source-map'; 81 | // http://vue-loader.vuejs.org/en/workflow/production.html 82 | module.exports.plugins = (module.exports.plugins || []).concat([ 83 | new webpack.DefinePlugin({ 84 | 'process.env': { 85 | NODE_ENV: '"production"' 86 | } 87 | }), 88 | new webpack.LoaderOptionsPlugin({ 89 | minimize: true 90 | }) 91 | ]); 92 | } 93 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 143 | 144 | 149 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⛔️ DEPRECATED This repo has not been maintained 2 | 3 |

4 | NPM version 5 | NPM downloads 6 | License 7 | Demo Build Status 8 |

9 | 10 | # 🎢 Vue Slide Bar 11 | 12 | A Simple Vue Slider Bar Component. 13 | 14 | 15 | # Docs 16 | ### [Document & Demo Page](https://biigpongsatorn.github.io/#/vue-slide-bar) 17 | 18 | # Install 19 | 20 | ```sh 21 | npm install vue-slide-bar --save 22 | ``` 23 | or 24 | ```sh 25 | yarn add vue-slide-bar 26 | ``` 27 | 28 | # Usage 29 | ```javascript 30 | // main.js 31 | import Vue from 'vue' 32 | import VueSlideBar from 'vue-slide-bar' 33 | 34 | Vue.component('VueSlideBar', VueSlideBar) 35 | ``` 36 | 37 | or 38 | 39 | ```javascript 40 | // xxx.vue 41 | import VueSlideBar from 'vue-slide-bar' 42 | 43 | export default { 44 | components: { 45 | VueSlideBar 46 | } 47 | } 48 | ``` 49 | 50 | ## Simple 51 |
52 | 53 | ```html 54 | 57 | 58 | 67 | ``` 68 | 69 | ## With Label 70 |
71 | 72 | ```html 73 | 90 | 91 | 148 | ``` 149 | 150 | ## Custom Style & Min-Max 151 |
152 | 153 | ```html 154 | 167 | 168 | 188 | ``` 189 | 190 | ## Loading 191 |
192 | 193 | ```html 194 | 208 | 209 | 235 | ``` 236 | 237 | ## Options 238 | 239 | ### Props 240 | | Props | Type | Default | Description | 241 | | ----------- |:--------------| ---------|--------------| 242 | | v-model | Number,String | 0 | Initial value (v-model)| 243 | | min | Number | 0 | Minimum value | 244 | | max | Number | 100 | Maximum value | 245 | | process-style | Object | null | Process bar style. | 246 | | tooltip-styles | Object | null | Tooltip style. | 247 | | label-style | Object | null | Label style. | 248 | | data | Array | null | Custom data. | 249 | | is-disabled | Boolean | false | Flag for disable slider bar | 250 | | draggable | Boolean | true | Flag for active/disable draggable | 251 | | show-tooltip | Boolean | true | Flag display tooltip | 252 | | icon-width | Number | 20 | Icon width | 253 | | line-height | Number | 5 | Line height | 254 | | speed | Number | 0.5 | Transition time | 255 | | paddingless | Boolean | false | Remove padding and min-height | 256 | 257 | ### Events 258 | | Name | Description | 259 | | --------------|--------------| 260 | | input | triggered on value change | 261 | | callbackRange | triggered on range value change | 262 | | dragStart | triggered on start drag | 263 | | dragEnd | triggered on stop drag | 264 | 265 | ### Slot 266 | | Name | Description | 267 | | --------------|--------------| 268 | | tooltip | Customize the tooltip slot.| 269 | 270 | [#](https://vuejs.org/v2/guide/components.html#Scoped-Slots) When using the template element as a slot, can add special properties `slot-scope` to get the value. 271 | 272 | # Contributing 273 | 1. Fork this repository. 274 | 2. Create new branch with feature name. 275 | 3. Run `npm install` and `npm run dev`. 276 | 4. Create your feature. 277 | 5. Commit and set commit message with feature name. 278 | 6. Push your code to your fork repository. 279 | 7. Create pull request. 🙂 280 | 281 | # Support 282 | 283 | ``` 284 | If you like this project, You can support me with starring ⭐ this repository. 285 | ``` 286 | 287 | ## License 288 | 289 | [MIT](LICENSE) 290 | 291 | Developed with ❤️ and ☕️ 292 | -------------------------------------------------------------------------------- /src/index.vue: -------------------------------------------------------------------------------- 1 | 64 | 406 | 407 | 506 | --------------------------------------------------------------------------------