css实现彩色渐变滑动条

效果：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="jquery-1.11.3.min.js" type="text/javascript"></script><style type="text/css">* {padding: 0;margin: 0;}.slider-panel {background-color: #fcc688;height: 450px;width: 600px;padding: 20px;margin: auto;}.slider-panel .slider-box {background-color: darkgray;margin-top: 40px;display: inline-block;width: 305px;height: 6px;position: relative;border-radius: 5px;}/* 滑条划过的宽度，默认值为0 */.slider-panel .slider-box .slider-value {background-image: linear-gradient(90deg, #82E0F7 0%, #009DDC 52%);height: 6px;width: 0;border-radius: 5px;}/* 滑条的样式。默认透明 */.slider-panel input {position: absolute;left: 0;top: 0;-webkit-appearance: none;-ms-appearance: none;background: transparent;width: 305px;height: 2px;outline: none;}/* 圆形滑块的样式 */.slider-panel input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;height: 12px;width: 12px;background-color: #eaecee;border-radius: 50%;cursor: pointer;box-shadow: 0 2px 4px 0 #212B35;background: #4BBEEC;border: 2px solid #FFFFFF;}</style><script type="text/javascript">$(function() {//绑定鼠标滑动事件$(' .slider-panel input').on('mousemove touchmove touchend click', moveSlider)function moveSlider() {// 获取当前滑条的动态值let sliderValue = parseInt($(this).val());// 将滑条的值赋值给滑条划过后p标签的宽度$('.slider-value').css('width', sliderValue + '%');// 显示当前滑条的动态值$('.slider-percentage').text(sliderValue);}})</script><title>彩色渐变滑动条</title></head><body><div class="slider-panel"><!--slider-box表示整个滑条的颜色  --><div class="slider-box"><!--slider-value表示滑条划过后的部分用一个颜色显示覆盖slider-box的颜色达到进度作用  --><p class="slider-value"></p><!-- 滑条的背景颜色透明只有--><input type="range" min="0" step="1" max="100" value="0"></div><p><span class='slider-percentage'>0</span>%</p></div></div></body>
</html>

css实现彩色渐变滑动条相关推荐

在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果
css怎么实现圆形渐变进度条效果发布时间:2021-03-17 10:29:57 来源:亿速云阅读:129 作者:小新这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容.小编觉得挺 ...
Qt QSS之QSlider滑动条美化
首先什么是qss呢?QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制.QSS大量copy了CSS的功能,只不过QSS的可以看作是CSS简化版,要弱很 ...
Qt-qss之QSlider滑动条美化
首先什么是qss呢?QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制.QSS大量copy了CSS的功能,只不过QSS的可以看作是CSS简化版,要弱很 ...
HighGUI图像用户界面初步（滑动条、鼠标操作）
文章目录 1.Mat类简析 2.图像的载入:imread()函数 3.图像的显示:imshow()函数 4.创建窗口:namedWindow()函数 5.输出图像到文件:imwrite()函数 6.综 ...
OpenCV之highgui 模块. 高层GUI和媒体I/O：为程序界面添加滑动条 OpenCV的视频输入和相似度测量用OpenCV创建视频
为程序界面添加滑动条在以前的教程中 (例如 linear blending 和 brightness and contrast adjustments)你有可能注意到需要 input 一些数值到我们 ...
【JavaScript吉光片羽】--- 滑动条
灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) {var defaults = {$id: "", // 进度条dom ...
android gridview滑动监听,Android GridView 滑动条设置一直显示状态(推荐)
Android GridView 滑动条设置一直显示状态(推荐) 模拟GridView控件: android:id="@+id/picture_grid" android:layo ...
最简单DIY基于ESP8266的智能彩灯③（在网页用按钮+滑动条+手机APP控制RGB灯）
ESP8266和ESP32智能彩灯开发系列文章目录第一篇:最简单DIY基于ESP8266的智能彩灯①(在网页用按钮点亮普通RGB灯) 第二篇:最简单DIY基于ESP8266的智能彩灯②(在网页用按键 ...
获取滑动条位置，动态调整对话框显示位置；为动态添加的button添加click事件
1.获取滑动条位置,动态调整对话框显示位置应用场景:页面上有三个按钮,所处位置高度不同,有的按钮需要移动滑动条才能看到,各个按钮点击后要弹出同一个对话框,为了保证对话框始终显示在当前视野的中央位置, ...

css实现彩色渐变滑动条

css实现彩色渐变滑动条相关推荐

最新文章

热门文章