其他代码

CSS3简洁滑块设计jQuery效果

也想出现在这里?联系我们
创客主机


这是一款jquery和CSS3简洁滑块设计效果。该滑块通过CSS3进行布局,然后通过简单的jquery代码来在用户拖动滑块时,获取相应的数值。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  2. <script src="js/jquery.min.js" type="text/javascript"></script>

HTML结构

滑块的HTML结果如下:

  1. <div class="container">
  2.     <div class="row pad-15">
  3.         <div class="col-md-offset-2 col-md-8">
  4.             <div class="range-slider">
  5.                 <input type="range" value="150" min="0" max="500">
  6.                 <span class="range-value">0</span>
  7.             </div>
  8.  
  9.             <div class="range-slider">
  10.                 <input type="range" value="280" min="0" max="500">
  11.                 <span class="range-value">0</span>
  12.             </div>
  13.  
  14.             <div class="range-slider">
  15.                 <input type="range" value="360" min="0" max="500">
  16.                 <span class="range-value">0</span>
  17.             </div>
  18.         </div>
  19.     </div>
  20. </div>

CSS样式

然后为滑块添加下面的CSS样式。

  1. :root{
  2.     --white: #fff;
  3.     --main-color: #10ac84;
  4. }
  5. .demo{ background-color: #63e8c4; padding: 2em 0}
  6. .range-slider{
  7.     background-color: var(--white);
  8.     border-radius: 15px;
  9.     padding: 27px 0 0 20px;
  10.     margin: 30px 0 0 0;
  11. }
  12. .range-slider input[type="range"]{
  13.     background: var(--main-color);
  14.     width: calc(100% - (85px));
  15.     height: 7px;
  16.     border-radius: 5px;
  17.     outline: none;
  18.     float: left;
  19.     -webkit-appearance: none;
  20.     position: relative;
  21. }
  22. .range-slider input[type="range"]::-webkit-slider-thumb{
  23.     background: var(--white);
  24.     width: 32px;
  25.     height: 32px;
  26.     border: 4px solid var(--main-color);
  27.     border-radius: 50%;
  28.     cursor: pointer;
  29.     transition: all 0.15s ease-in-out 0s;
  30.     -webkit-appearance: none;
  31.     appearance: none;
  32. }
  33. .range-slider input[type="range"]::-webkit-slider-thumb:hover,
  34. .range-slider input[type="range"]:active::-webkit-slider-thumb{
  35.     box-shadow: 0 0 0 2px var(--white), 0 0 10px #000;
  36. }
  37. .range-slider input[type="range"]::-moz-range-thumb{
  38.     background: var(--white);
  39.     width: 25px;
  40.     height: 25px;
  41.     cursor: pointer;
  42.     border: 4px solid var(--main-color);
  43.     border-radius: 50%;
  44.     transition: all 0.15s ease-in-out 0s;
  45. }
  46. .range-slider input[type="range"]::-moz-range-thumb:hover,
  47. .range-slider input[type="range"]:active::-moz-range-thumb{
  48.     box-shadow: 0 0 0 2px var(--white), 0 0 10px #000;
  49. }
  50. .range-slider .range-value{
  51.     color: var(--white);
  52.     background: var(--main-color);
  53.     font-size: 20px;
  54.     font-weight: 600;
  55.     text-align: center;
  56.     line-height: 35px;
  57.     width: 60px;
  58.     height: 35px;
  59.     padding: 0 15px 0 10px;
  60.     margin-left: 5px;
  61.     border-radius: 15px;
  62.     display: inline-block;
  63.     position: relative;
  64.     top: -14px;
  65.     -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  66.     clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  67. }
  68. ::-moz-range-track{
  69.     background: transparent;
  70.     border: 0;
  71. }

Javascript

最后,添加下面的jquery代码,来在用户拖动滑块时,获取相应的数值。

  1. $(document).ready(function(){
  2.     var rangeSlider = function(){
  3.         var slider = $('.range-slider'),
  4.             range = $('.range-slider input[type="range"]'),
  5.             value = $('.range-value');
  6.         slider.each(function(){
  7.             value.each(function(){
  8.                 var value = $(this).prev().attr('value');
  9.                 $(this).html(value);
  10.             });
  11.             range.on('input', function(){
  12.                 $(this).next(value).html(this.value);
  13.             });
  14.         });
  15.     };
  16.     rangeSlider();
  17. });
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

热评文章

发表评论

嘿,欢迎咨询!