css实现彩色渐变滑动条

举报
AlbertYang 发表于 2021/02/03 00:45:04 2021/02/03
【摘要】 效果: 标题 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <style type="text/css"> * { paddin...

效果:

标题

代码:


  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="jquery-1.11.3.min.js" type="text/javascript"></script>
  6. <style type="text/css">
  7. * {
  8. padding: 0;
  9. margin: 0;
  10. }
  11. .slider-panel {
  12. background-color: #fcc688;
  13. height: 450px;
  14. width: 600px;
  15. padding: 20px;
  16. margin: auto;
  17. }
  18. .slider-panel .slider-box {
  19. background-color: darkgray;
  20. margin-top: 40px;
  21. display: inline-block;
  22. width: 305px;
  23. height: 6px;
  24. position: relative;
  25. border-radius: 5px;
  26. }
  27. /* 滑条划过的宽度,默认值为0 */
  28. .slider-panel .slider-box .slider-value {
  29. background-image: linear-gradient(90deg, #82E0F7 0%, #009DDC 52%);
  30. height: 6px;
  31. width: 0;
  32. border-radius: 5px;
  33. }
  34. /* 滑条的样式。默认透明 */
  35. .slider-panel input {
  36. position: absolute;
  37. left: 0;
  38. top: 0;
  39. -webkit-appearance: none;
  40. -ms-appearance: none;
  41. background: transparent;
  42. width: 305px;
  43. height: 2px;
  44. outline: none;
  45. }
  46. /* 圆形滑块的样式 */
  47. .slider-panel input[type=range]::-webkit-slider-thumb {
  48. -webkit-appearance: none;
  49. height: 12px;
  50. width: 12px;
  51. background-color: #eaecee;
  52. border-radius: 50%;
  53. cursor: pointer;
  54. box-shadow: 0 2px 4px 0 #212B35;
  55. background: #4BBEEC;
  56. border: 2px solid #FFFFFF;
  57. }
  58. </style>
  59. <script type="text/javascript">
  60. $(function() {
  61. //绑定鼠标滑动事件
  62. $(' .slider-panel input').on('mousemove touchmove touchend click', moveSlider)
  63. function moveSlider() {
  64. // 获取当前滑条的动态值
  65. let sliderValue = parseInt($(this).val());
  66. // 将滑条的值赋值给滑条划过后p标签的宽度
  67. $('.slider-value').css('width', sliderValue + '%');
  68. // 显示当前滑条的动态值
  69. $('.slider-percentage').text(sliderValue);
  70. }
  71. })
  72. </script>
  73. <title>彩色渐变滑动条</title>
  74. </head>
  75. <body>
  76. <div class="slider-panel">
  77. <!--slider-box表示整个滑条的颜色 -->
  78. <div class="slider-box">
  79. <!--slider-value表示滑条划过后的部分用一个颜色显示覆盖slider-box的颜色达到进度作用 -->
  80. <p class="slider-value"></p>
  81. <!-- 滑条的背景颜色透明只有-->
  82. <input type="range" min="0" step="1" max="100" value="0">
  83. </div>
  84. <p><span class='slider-percentage'>0</span>%</p>
  85. </div>
  86. </div>
  87. </body>
  88. </html>

文章来源: albertyang.blog.csdn.net,作者:Albert Yang,版权归原作者所有,如需转载,请联系作者。

原文链接:albertyang.blog.csdn.net/article/details/100537239

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。