＜input type=‘range‘＞ css自定义滑块样式

最新推荐文章于 2023-06-11 09:51:49 发布

~，555555

最新推荐文章于 2023-06-11 09:51:49 发布

阅读量1.6k

点赞数 1

分类专栏：前端学习文章标签： scss css input 滑块滑动条

本文链接：https://blog.csdn.net/weixin_44717047/article/details/121626607

版权

前端学习专栏收录该内容

84 篇文章 3 订阅

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript实现一个自定义样式的滑块，并通过监听onmousemove事件实现实时显示数值的功能。滑块设计包括隐藏原生样式，设置背景颜色，圆角，阴影以及滑过部分的颜色变化。同时，通过JavaScript函数rangeSlide更新滑块值显示。

摘要由CSDN通过智能技术生成

自定义滑块1

在这里插入图片描述

HTML: <input type='range' min='0' max='1000' value='0'>

css:

input{
  width: 400px;
  height: 15px;
  // 不显示原本的样式
  -webkit-appearance: none; 
  background-color: #111;
  outline: none;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: inset 0 0 5px rgba(0,0,0, 1);
}
input::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  // 通过巨大的box-shadow 来展示已经滑过的滑条颜色
  // 要配合上面的overflow
  box-shadow: -407px 0 0 400px #00fd0a;
}

JS：

如果说只监听onChange那么只会在拖动停止后才会显示数字，监听onmouseover便可以实时显示数字。

<body>
<div>
<span class="rangeValue">0</span>
<input type="range" name="" value="0" min="0" max="1000" onChange="rangeSlide(value)" onmousemove="rangeSlide(value)">
</div>
<script>
  function rangeSlide(value){
    console.log(value);
    document.querySelector('.rangeValue').textContent = value;
  }
</script>
</body>

全部代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;

    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #151515;
    }

    div {
      position: relative;
    }

    .rangeValue {
      position: relative;
      display: block;
      text-align: center;
      font-size: 6em;
      color: #999;
    }

    input {
      width: 400px;
      height: 15px;
      -webkit-appearance: none;
      background-color: #111;
      outline: none;
      overflow: hidden;
      border-radius: 15px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
    }

    input::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #00fd0a;
      cursor: pointer;
      border: 4px solid #333;
      box-shadow: -407px 0 0 400px #00fd0a;
    }
  </style>
</head>

<body>
  <div>
    <span class="rangeValue">0</span>
    <input type="range" name="" value="0" min="0" max="1000" onChange="rangeSlide(value)"
      onmousemove="rangeSlide(value)">
  </div>
  <script>
    function rangeSlide(value) {
      console.log(value);
      document.querySelector('.rangeValue').textContent = value;
    }
  </script>
</body>

</html>