用原生input type=range 写一个滑块，兼容各大浏览器

IT博客技术分享

已于 2023-09-14 18:00:55 修改

阅读量639

点赞数

分类专栏： JavaScript 文章标签：前端

于 2023-09-14 17:48:45 首次发布

本文链接：https://blog.csdn.net/qq_41646249/article/details/132887500

版权

JavaScript 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

属性	描述
max	设置或返回滑块控件最大值
min	设置或返回滑块控件最小值
step	设置或返回每次拖动滑块控件时的递增量
value	设置或返回滑块控件的value值
defaultValue	设置或返回滑块控件的默认值
autofocus	设置或返回滑块控件在页面加载后是否应自动获取焦点

先看谷歌浏览器:

览器

用法很简单，如下所示：

<input type="range" value="0">

火狐浏览器：

除了火狐的样式需要另外重写一套css，其他的基本不用。

		/* 火狐 内背景色 */
		input[type=range]::-moz-range-track {
			height: 4px;
      background: rgb(229, 229, 229);
		}
		/* 火狐 外背景色 */
		input[type=range]::-moz-range-progress {
			background: #767676;
			height: 4px;    
			border-radius: 10px;
		}

全部代码如下:

<!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>
  
  <!-- 下面这段CSS代码定义了range控件的样式 -->
  <style>
    /* 隐藏range控件默认样式 */
    [type="range"] {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      outline: 0;
      background-color: transparent;
      width: 500px;
			border-radius: 10px;
    }
		/* 火狐 内背景色 */
		input[type=range]::-moz-range-track {
			height: 4px;
      background: rgb(229, 229, 229);
		}
		/* 火狐 外背景色 */
		input[type=range]::-moz-range-progress {
			background: #767676;
			height: 4px;    
			border-radius: 10px;
		}

    /* 定义range控件轨道的样式 */
    [type="range"]::-webkit-slider-runnable-track {
      height: 4px;
      background: rgb(229, 229, 229);
    }
 
    /* 定义range控件容器的样式 */
    [type="range" i]::-webkit-slider-container {
      height: 20px;
      overflow: hidden;
    }
 
    /* 定义range控件拇指的样式 */
    [type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #767676 !important;
      border: 1px solid transparent;
      margin-top: -8px;
      /* 使用border-image属性给拇指添加渐变边框 */
      border-image: linear-gradient(#767676, #767676) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
    }
  </style>
</head>
 
<body>
  <!-- 在页面上添加一个range控件-->
  <input type="range" min="0" max="100" value="50">
 
</body>
 
</html>