滑动条

最新推荐文章于 2024-02-29 14:45:47 发布
最新推荐文章于 2024-02-29 14:45:47 发布
阅读量381 收藏
点赞数
分类专栏： # html小效果 文章标签： 美化input[type=range] 滑动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ajia_666/article/details/80335015
版权
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >滑动条 </ title >
< style type= "text/css" >
*{ margin: 0; padding: 0}
body{ padding-top: 30px; text-align: center}
/*谷歌浏览器样式开始 */
input[ type= range ] {
/* 轨道的样式 */
-webkit-appearance: none;
outline: none;
width: 600px;
height: 20px;
border-radius: 10px;
box-shadow: 0 1px 1px 0 #ddd inset;
background: -webkit-linear-gradient( #f80f80, #f80f80) no-repeat, #eee;
background-size: 1% 100%;
}
input[ type= range ]::-webkit-slider-thumb {
/* 滑块的样式 */
-webkit-appearance: none;
height: 34px;
width: 34px;
background: #FF5C5C;
border-radius: 50%; /*外观设置为圆形*/
border: solid 4px #fff; /*设置边框*/
box-shadow: 0 0 0 #3b4547; /*添加底部阴影*/
}
/*谷歌浏览器样式结束 */
/* 火狐浏览器样式开始 */
input[ type= range ]::-moz-range-progress {
background: -moz-linear-gradient( left, #f80f80, #f80f80);
height: 20px;
border-radius: 10px;
}
input[ type= range ]::-moz-range-track {
background: #eee;
height: 20px;
border-radius: 10px;
}
input[ type= range ]::-moz-range-thumb {
/* 滑块的样式 */
-webkit-appearance: none;
height: 34px;
width: 34px;
background: #FF5C5C;
border-radius: 50%; /*外观设置为圆形*/
border: solid 4px #fff; /*设置边框*/
box-shadow: 0 0 0 #3b4547; /*添加底部阴影*/
}
/* 火狐浏览器样式结束 */
< / style >
</ head >
< body >
< input type= "range" value= "0" min= "0" max= "100" step= "5" id= "jsChange" >
<!-- min最小值，max最大值，step每次移动的步数 -->
</ body >
< script type= "text/javascript" >
jsChange. oninput = function(){
this. style. backgroundSize= this. value+ '% 100%';
}
< / script >
</ html >

非常简单的滑动条，兼容谷歌、火狐、IE9+;

效果如下


Ajia_666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
matlab 滑动条滑块大小,滑动条控件(CSliderCtrl)使用说明 - szflyming - 博客园
weixin_36193418的博客
03-16 1890
滑动条控制(Slider Control)也叫轨道条控制，其主要是用一个带有轨道和滑标的小窗口以及窗口上的刻度，来让用户选择一个离散数据或一个连续的数值区间。通过鼠标或键盘来进行数据的选择操作，这在WIN98/95中的很多应用程序中都可以看到，如控制面板中的鼠标等，滑动条既可以是水平方式的也可以是垂直方式的。滑动条控制的风格如下：TBS_HORZ 滑动条是水平方向的TBS_VERT 滑动条是垂直方...
HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type="range"]）
weixin_32211599的博客
05-30 2895
HTML 4.01 与 HTML5之间的差异以下 input 的 type属性值是 HTML5 中新增的：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。input的type属性设置input的type="range"即可得到滑动条控件，如下：const range = d...
滑动条的简单应用（VC）
12-23
滑动条的简单应用（VC）设计了一个简单滑动条应用，适用于新手
C/C++ OpenCV滑动条的创建与使用
IT1995的博客
01-09 7824
C/C++ OpenCV滑动条的创建与使用
Unity滑动条
lucky_XiaoZhang的博客
11-08 974
Unity滑动框获得value的值
WPF 滑动条样式
XX_YYDS的博客
02-29 785
一个纯Xaml的滑动条样式。
Android 淘宝滑动条，淘宝菜单滑动条；
Choi晨的博客
06-02 1547
淘宝菜单滑动条，图如下； 实现一下这个效果 ， 上面是列表，可以用RecyclerView实现 ， 下面跟随菜单滑动的条可以用View做位移动画实现； <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" andr
纯js实现滑动条
Sissi的个人笔记
09-07 4619
效果图 页面构成 <span class="box" id="box-lj-sgj"> <i class="hd"></i> <i class="hdt"></i> </span> css .tab-con .box,.tab-con .box .hd,.tab-con .box .hdt{ dis...
Qt自定义滑动条
阿清的随手记
01-14 4658
最近要用到滑动条，Qt自带的QSlider虽然能满足需求，但是操作起来有很多不舒服的地方，于是在它的基础上改了改，分享给大家使用。 先放效果图： 在QSlider的基础上，改变了样式，绘制了刻度，增加了取整功能，只需要微调就能适应各种需求。 头文件。需要包含下面的东西 #include <QSlider> #include <QtCore> #include <QStylePainter> #include <QStyleOptionSlider>
Opencv--滑动条
wh22141334的博客
07-22 1385
Opencv中的滑动条
圆弧滑动条
07-09
"圆弧滑动条"是一种独特的用户界面元素，它在传统的线性滑动条基础上进行了创新，将滑动条的设计转换为圆形或弧形。这种设计通常用于提供一种直观、吸引人的交互方式，特别是在需要表示角度、比例或者周期性变化的...
bootstrap滑动条
12-23
Bootstrap滑动条是一种在网页设计中常用的交互元素，它允许用户通过拖动滑块来选择一个范围或特定值。在Bootstrap框架中，滑动条组件并非内建的，但可以通过第三方插件如`bootstrap-slider`来实现。这个压缩包文件`...
验证滑动条
02-25
验证滑动条，滑动验证码的js，样式、图片、js库等等，demo
Android自定义Seekbar滑动条 Pop提示跟随滑动按钮滑动
08-27
"Android自定义Seekbar滑动条Pop提示跟随滑动按钮滑动" Android自定义Seekbar滑动条Pop提示跟随滑动按钮滑动是一种常见的交互效果，在Android应用程序中广泛应用。本文将详细介绍如何自定义Seekbar滑动条，实现Pop...
idea修改滑动条颜色
victor213689的博客
07-04 4499
打开 Preferences -> Editor -> Color Scheme； 导出主题配置文件。Scheme项显示当前主题名称，右侧有一个齿轮 ⚙形状的配置按钮，点击后选择 Export -> IntelliJ IDEA color scheme (.icls)，导出配置； 编辑导出的配置文件。将parent_scheme的值配置为“Darcula”，将originalSc...
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
最新发布
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
超详细讲C++cout语句
07-20
超详细讲C++cout语句，专门为C++初学者录制。
streamlit滑动条
04-12
Streamlit是一个用于构建数据科学和机器学习应用程序的Python库。它提供了一个简单易用的界面，可以通过滑动条来交互式地控制应用程序的参数。 在Streamlit中，你可以使用`st.slider()`函数来创建一个滑动条。该函数接受三个参数：标签（label）、最小值（min_value）和最大值（max_value）。你可以根据需要设置滑动条的初始值、步长和格式等属性。 下面是一个使用Streamlit创建滑动条的示例代码： ```python import streamlit as st # 创建一个滑动条 value = st.slider("选择一个值", min_value=0, max_value=100, value=50, step=1) # 打印滑动条的值 st.write("你选择的值是：", value) ``` 在上面的示例中，我们创建了一个范围从0到100的滑动条，并设置初始值为50，步长为1。用户可以通过拖动滑块来选择一个值，并且选择的值会被打印出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值