如何自定义输入范围滑块？

Question

我注意到Iconic上的范围滑块看起来很棒。

在IOS上更好。他们是怎么做到的？

我笨拙地将我通过Chrome开发工具检查器看到的内容复制并粘贴到http://m.dabase.com/r/，但它不起作用。我错过了什么？

Answer 1

请检查答案。它对我来说很好。希望它对你有所帮助。

<强> HTML

<div class="form-range-control"><input type="range" max="100" min="10" value="100" step="1"></div>

<强>的CSS：

.form-range-control {
  margin: 0 auto;
  background-color: #afe0fc;
  padding: 1.5em;
  border-radius: 5px;
 }
 .form-range-control input[type="range"] {
  -webkit-appearance: none;
  background-color: white;
  height: 3px;
  border-radius: 1px;width:100%; 
 }
 .form-range-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #078dd8;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab; 
 }

Demo

Answer 2

这是plunker

http://plnkr.co/edit/TUx6xNA1dv3OJowBEDQj?p=preview

CSS：

.tour-sidebar {
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
font-family: 'Gotham SSm A', 'Gotham SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 77px;
line-height: 18.571409225463867px;
margin-top: 54.599998474121094px;
width: 222.5px;

}





.form-range-control {
  width: 100%;
  margin: 0 auto;
  background-color: #afe0fc;
  padding: 1.5em;
  border-radius: 5px; }
  .form-range-control input[type="range"] {
    -webkit-appearance: none;
    background-color: white;
    height: 3px;
    border-radius: 1px; }
    .form-range-control input[type="range"]:focus {
      outline: none; }
  .form-range-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #078dd8;
    border-radius: 50%;
    cursor: -moz-grab;
    cursor: -webkit-grab; }
    .form-range-control input[type="range"]::-webkit-slider-thumb:active, .form-range-control input[type="range"]::-webkit-slider-thumb:focus {
      background: #056da7;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing; }