├── screenshot
    └── 1.jpg
├── dist
    ├── assets
    │   ├── orange.png
    │   └── white.png
    └── vue-slider.vue
├── LICENSE
└── README.md


/screenshot/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FZliweiliang/vue-slider/HEAD/screenshot/1.jpg


--------------------------------------------------------------------------------
/dist/assets/orange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FZliweiliang/vue-slider/HEAD/dist/assets/orange.png


--------------------------------------------------------------------------------
/dist/assets/white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FZliweiliang/vue-slider/HEAD/dist/assets/white.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 liweiliang
 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-slider
 2 | ## Usage
 3 | 
 4 | #### Use:
 5 | 
 6 | ```html
 7 | <template>
 8 |   <div>
 9 |     <slider :value-fun="sliderVal" :min="0" :max="100"></slider>
10 |   </div>
11 | </template>
12 | <script>
13 | 
14 | import slider from 'vue-slider.vue'
15 | 
16 | new Vue({
17 |   el: '#app',
18 |   components: {
19 |     slider
20 |   },
21 |   methods:{
22 |     sliderVal(min,max,total){
23 |        
24 |     }
25 |   },
26 | });
27 | </script>
28 | ```
29 | <br>
30 | 
31 | 
32 | ## Options
33 | 
34 | ### Props
35 | | Props       | Type          | Default  | Description  |
36 | | ----------- |:--------------| ---------|--------------|
37 | | max   | Number        | auto | 默认最大值 初始位置 |
38 | | min  | Number        | auto   | 默认最小值初始位置 |
39 | 
40 | 
41 | ### Function
42 | | Name        | Type           | Description                |
43 | | ----------- |:---------------| ---------------------------|
44 | | valueFun    | Return: value  | valueFun(最小值,最大值,合计) |
45 | 
46 | ### Screenshot
47 | <img src="https://github.com/474782977/vue-slider/blob/master/screenshot/1.jpg" width="320px" style="display:inline;">
48 | 
49 | ## License
50 | 
51 | [MIT](LICENSE)
52 | 


--------------------------------------------------------------------------------
/dist/vue-slider.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="slider" ref="mySlider">
  3 | 		<div class="left-btn" @touchstart.prevent="btnFun(2)">
  4 | 			<img v-if="myPosition.isBtn==2" :src="orange"/>
  5 | 			<img v-else :src="white"/>
  6 | 		</div>
  7 | 		<div class="propo"></div>
  8 | 		<div class="propo-bg"></div>
  9 | 		<div class="right-btn" @touchstart.prevent="btnFun(1)">
 10 | 			<img v-if="myPosition.isBtn==1" :src="orange"/>
 11 | 			<img v-else :src="white"/>
 12 | 		</div>
 13 | 	</div>
 14 | </template>
 15 | <script type="text/javascript">
 16 | import orange from './assets/orange.png'
 17 | import white from './assets/white.png'
 18 | 	export default {
 19 | 		name: 'slider',
 20 | 		props:{
 21 | 			"valueFun":{
 22 | 				type:Function,
 23 | 				required: true,
 24 | 			},
 25 | 			"max":{
 26 | 				type:Number,
 27 | 				default:100
 28 | 			},
 29 | 			"min":{
 30 | 				type:Number,
 31 | 				default:0
 32 | 			}
 33 | 		},
 34 | 		data(){
 35 | 			return{
 36 | 				myPosition:{
 37 | 					left:0,
 38 | 					right:0,
 39 | 					now:0,
 40 | 					isBtn:0,
 41 | 					propoWidth:0
 42 | 				},
 43 | 				myDefault:null,
 44 | 				white,
 45 | 				orange,
 46 | 			}
 47 | 		},
 48 | 		methods:{
 49 | 			btnFun(index){
 50 | 				this.myPosition.isBtn = index
 51 | 			}
 52 | 		},
 53 | 		mounted(){
 54 | 			//滑块
 55 | 			let that = this
 56 | 			let mySlider = this.$refs.mySlider
 57 | 			let propo = mySlider.children[1]
 58 | 			let rightBtn = mySlider.children[3]
 59 | 			let leftBtn = mySlider.children[0]
 60 | 			let myWidth = 0
 61 | 
 62 | 			const elementLeft = (e) => { //计算x坐标
 63 | 				var offset = e.offsetLeft;
 64 | 				if(e.offsetParent != null) offset += elementLeft(e.offsetParent);
 65 | 				return offset;
 66 | 			}
 67 | 
 68 | 			const myCount = () => { //计算滑动
 69 | 				if(this.myPosition.right>this.myPosition.left){ //判断滑动范围
 70 | 					this.myPosition.propoWidth = this.myPosition.right - this.myPosition.left
 71 | 					propo.style.width = this.myPosition.propoWidth+'%'
 72 | 					propo.style.left = this.myPosition.left + '%'
 73 | 					this.valueFun(parseInt(this.myPosition.left),parseInt(this.myPosition.right),parseInt(this.myPosition.propoWidth))
 74 | 				}else if(this.myPosition.right<this.myPosition.left){
 75 | 					this.myPosition.propoWidth = this.myPosition.left - this.myPosition.right
 76 | 					propo.style.width = this.myPosition.propoWidth+'%'
 77 | 					propo.style.left = this.myPosition.right+'%'
 78 | 					this.valueFun(parseInt(this.myPosition.right),parseInt(this.myPosition.left),parseInt(this.myPosition.propoWidth))
 79 | 				}else if(this.myPosition.right==this.myPosition.left){//按钮位置滑到最大值或者最小值
 80 | 					this.myPosition.propoWidth = this.myPosition.left - this.myPosition.right
 81 | 					propo.style.width = this.myPosition.propoWidth+'%'
 82 | 					propo.style.left = this.myPosition.right+'%'
 83 | 					this.valueFun(parseInt(this.myPosition.right),parseInt(this.myPosition.left),parseInt(this.myPosition.propoWidth))
 84 | 				}
 85 | 				
 86 | 			}
 87 | 
 88 | 			this.myDefault = () => {//初始化
 89 | 				this.myPosition.right = this.max
 90 | 				this.myPosition.left = this.min
 91 | 				
 92 | 				if(this.max > this.min){
 93 | 					this.myPosition.propoWidth = this.max - this.min
 94 | 					propo.style.left = this.myPosition.left + '%'
 95 | 				}else{
 96 | 					this.myPosition.propoWidth = this.min - this.max
 97 | 					propo.style.left = this.myPosition.right + '%'
 98 | 				}
 99 | 				
100 | 				propo.style.width = this.myPosition.propoWidth+'%'
101 | 				leftBtn.style.left = this.myPosition.right + '%'
102 | 				rightBtn.style.left = this.myPosition.left + '%'
103 | 				this.valueFun(this.myPosition.left,this.myPosition.right,this.myPosition.propoWidth)
104 | 			}
105 | 
106 | 			let mySliderX = elementLeft(mySlider) //滑动块x坐标
107 | 
108 | 			mySlider.addEventListener('touchmove',(e)=>{ //屏幕滑动事件
109 | 				let pageX = e.touches[0].pageX-mySliderX //获取滑动x坐标
110 | 				myWidth = (pageX/mySlider.offsetWidth)*100 //计算百分比
111 | 				if(myWidth>100){ //判断不超出范围
112 | 					myWidth=100
113 | 				}else if(myWidth<0){
114 | 					myWidth=0
115 | 				}
116 | 				if(this.myPosition.isBtn == 1){//判断焦点
117 | 					this.myPosition.left = myWidth
118 | 					rightBtn.style.left = myWidth+'%' 
119 | 				}else if(this.myPosition.isBtn == 2){
120 | 					this.myPosition.right = myWidth
121 | 					leftBtn.style.left = myWidth+'%' 
122 | 				}
123 | 				myCount()
124 | 				e.preventDefault()
125 | 
126 | 			})
127 | 
128 | 			mySlider.addEventListener('touchstart',(e)=>{//屏幕触摸事件
129 | 				let touchX = e.touches[0].pageX-mySliderX
130 | 				let btnWidth = (leftBtn.offsetWidth/mySlider.offsetWidth)/2*100 //计算按钮宽度
131 | 				this.myPosition.now = (touchX/mySlider.offsetWidth)*100
132 | 				mySliderX = elementLeft(mySlider) //滑动块x坐标
133 | 				// if(this.myPosition.now <= this.myPosition.left+btnWidth&&this.myPosition.now >= this.myPosition.left-btnWidth){ //计算区间 获取焦点
134 | 				// 	this.myPosition.isBtn = 1
135 | 				// }else if(this.myPosition.now <= this.myPosition.right+btnWidth&&this.myPosition.now >= this.myPosition.right-btnWidth){
136 | 				// 	this.myPosition.isBtn = 2
137 | 				// }else{
138 | 				// 	this.myPosition.isBtn = 0
139 | 				// }
140 | 			})
141 | 
142 | 			this.myDefault()
143 | 		},
144 | 		watch:{
145 | 			min(New,old){
146 | 				this.myDefault()
147 | 			},
148 | 			max(New,old){
149 | 				this.myDefault()
150 | 			}
151 | 		}
152 | 	}
153 | </script>
154 | <style lang="scss">
155 | 	.slider{
156 | 			width: 100%;
157 | 			position:relative;
158 | 			height: 0.5rem;
159 | 			.left-btn,.right-btn{
160 | 				position: absolute;
161 | 				top: 0.04rem;
162 | 				transform:translate(-50%,0);
163 | 				padding: 0 0.3rem 0.3rem 0.3rem;
164 | 				img{
165 | 					width: 0.335rem;
166 | 				}
167 | 				// &:before{
168 | 				// 	content: ""; 
169 | 				// 	display: block;
170 | 				// 	width: 0; 
171 | 				// 	height: 0.4rem;
172 | 				// 	border-left: 0.17rem solid transparent; 
173 | 				// 	border-right: 0.17rem solid transparent; 
174 | 				// 	border-bottom: 0.17rem solid #B6B6B6; 
175 | 				// }
176 | 				// &:after{
177 | 				// 	content: "";
178 | 				// 	display: block;
179 | 				//     height: 0.30rem;
180 | 				//     width: 0.335rem;
181 | 				//     background: #B6B6B6;
182 | 				//     border-bottom-left-radius: 0.1rem;
183 | 				//     border-bottom-right-radius: 0.1rem;
184 | 				// }
185 | 			}
186 | 			.propo{
187 | 				width: 0%;
188 | 				height: 0.04rem;
189 | 				background: #FFD00D;
190 | 				position: absolute;
191 | 			    top: 0;
192 | 			    left: 0;
193 | 			    z-index: 2;
194 | 			}
195 | 			.propo-bg{
196 | 				background: #B6B6B6;
197 | 				border-radius: 0.04rem;
198 | 				height: 0.04rem;
199 | 				width:100%;
200 | 				position: absolute;
201 | 			    top: 0;
202 | 			    left: 0;
203 | 			    z-index: 1;
204 | 			}
205 | 			.active{
206 | 				&:before{
207 | 					border-bottom-color: #FF8C30
208 | 				}
209 | 				&:after{
210 | 					background: #FF8C30;
211 | 				}
212 | 			}
213 | 	}
214 | </style>
215 | 


--------------------------------------------------------------------------------