自定义UI组件系列之滑块(Range Slider)

原生的组件虽然长得丑,但是提供给我们的能力是很多的。原生的事件以及属性,这些是某些UI框架不能给我们的。所以,基于原生的一些组件来做一些定制化修改是有必要的。首先,我们来看一个常用的滑块组件。

场景

我在一个视频类demo中,使用到了滑块组件(也就是range类型的input组件)。

<input type="range" value="{{currentTime}}" min="0" max="{{duration}}" step="1" (input)="progressChange($event)">

未做定制的效果如下:
视频进度条和音量条

用到input的有两处,一个是视频的进度条,一个是音量条。不能说这个样式很丑,但是还有美化的空间。那么我们如何来修改input默认的样式呢?

自定义样式

input组件主要由两部分组成,轨道和滑块,它们都是伪元素。我们只要针对这两个伪元素来做试探性修改css就可以看到效果了。

// 轨道的伪元素,分别对应chrome,firefox,IE浏览器。
// ::-webkit-slider-runnable-track
// ::-moz-range-track
// ::-ms-track

// 滑块的伪元素,分别对应chrome,firefox,IE浏览器。
// ::-webkit-slider-thumb
// ::-moz-range-thumb
// ::-ms-thumb

去除浏览器的默认样式

每个浏览器对range类的input有不一样的默认样式,我们首先来去掉这种默认样式。

input[type=range] {
    // 去除浏览器默认的样式
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 300px;
    border-radius: 10px;
    &:focus {
	    // 去除落焦时的外边框效果
        outline: none;
    }
}

修改轨道css

样式的修改方式如下所示,这里只给出chrome的修改内容给大家参考,具体想要的样式效果当然由自己而定。

input[type=range]::-webkit-slider-runnable-track {
   height: 6px;
   border-radius: 10px; /*将轨道设为圆角的*/
   background: #ee2828;
}

修改滑块css

废话不多说,上代码。

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  top: -2px;
  background: #fff;
}

修改完毕,我们来看一下效果图。感觉还不错吧,加以修改,相信能做出更美的效果。
修改后效果图

放一个demo链接,大家自行查阅。

发布了98 篇原创文章 · 获赞 41 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览