vue3范围选择组件封装

个人项目地址： SubTopH前端开发个人站

（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）

SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home

以上 是个人前端项目，欢迎提出您的建议

以下是正文内容...............

实现效果

直接上代码

组件文件

 组件使用到的findCloseNum方法

// 判断当前数字  最靠近数组中那个数字
export function findCloseNum(arr, num) {
  var index = 0; // 保存最接近数值在数组中的索引
  var old_value = Number.MAX_VALUE; // 保存差值绝对值，默认为最大数值
  for (var i = 0; i < arr.length; i++) {
    var new_value = Math.abs(arr[i] - num); // 新差值
    if (new_value <= old_value) { // 如果新差值绝对值小于等于旧差值绝对值，保存新差值绝对值和索引
      if (new_value === old_value && arr[i] < arr[index]) { // 如果数组中两个数值跟目标数值差值一样，取大
        continue;
      }
      index = i;
      old_value = new_value;
    }
  }
  return arr[index] // 返回最接近的数值
}

 组件使用到的handleStepNumber方法

export function handleStepNumber(w, r) {
  const itemPx = w / r;
  let rangArr = [];
  for (let i = 0; i < r+1; i++) {
    rangArr.push(Math.ceil(itemPx * i));
  }
  return rangArr;
};

1.组件可以实现最小值和最大值的设置

2.可初始化值

3.组件长度根据父组件自定义

4.滑动和点击会改变范围值

根据自己的需求可进行更多扩展