# vue-slider

**Repository Path**: mliang/vue-slider

## Basic Information

- **Project Name**: vue-slider
- **Description**: 基于H5的滑动条range开发的silder组件，依赖elementui设计的vue组件，可以平均分配标尺（标尺间隔可以不一致，标尺间隔不在依据数学比例分割）
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-06-11
- **Last Updated**: 2023-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-slider

## 缘由

项目的页面中需要用到滑动条来选择带宽值，但是需求的滑动条的值分布不是平均的，[1, 20, 40, 60, 80, 100, 120,
140, 160, 180, 200, 300, 400, 500, 600, 700, 800, 900, 1024]，但是设计图最终效果的区间页面间隔是相同的，因此市面上的话条组件都无法满足需求，故而自己写了一个勉强能用的。

## 实现方法

结合H5的新标签input[type=range], 然后修改浏览器样式

滑块映射值，将input的值找到对应的区间，同时计算出区间的偏移值，得出对应值；

值映射滑块，将输入值找出区间后，算出区间边值+偏移值=input值


## 依赖

- lodash
- less

## 运行

```
yarn install
yarn serve
```

## 效果

![image](https://gitee.com/mliang/pictures/raw/master/vue-mc/silder.png)

## 未解决问题
1. IE10的tip提示无法隐去，IE10的tip是input的本身数值，与我们的显示数值不一致
2. 因为input[type=range]本身滑动是有数值对应的，但当自定义的区间差值和input本身的区间差值相差较大时，滑动条和输入框的值在很小的值内不一致。根本原因，因为input的值是平均分布，但是如果提供的mark区间不平均，那么在某些区间上的值范围会远远大于input本身，这会使得自动映射时，一个input的值可能同时对应两个mark中的值，虽然代码上做了忽略，但是使用中会发现，输入框变动但是滑块不懂得情况