range范围选择控件样式自定义演示页面

展示

代码

• HTML：

  <h4>样式自定义</h4>
  <input type="range" is="ui-range">
  
  <h4>星星评分</h4>
  <input type="range" is="ui-rate" max="5" step="0.5" value="2.5">

  CSS：

  /* range基础变量 */
  :root {
      --ui-range-track-hegiht: 4px;
      --ui-range-thumb-size: 16px;
  }
  
  /* range */
  [is="ui-range"] {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      outline: 0;
      background-color: transparent;
      overflow: hidden;
  }
  [is="ui-range"]:disabled {
      opacity: var(--ui-opacity, .4);
  }
  [is="ui-range"]::-webkit-slider-runnable-track {
      display: flex;
      align-items: flex-start;
      position: relative;
      height: var(--ui-range-track-hegiht);
      background: var(--ui-blue, #2a80eb);
  }
  [type="range" i]::-webkit-slider-container {
      display: flex;
      height: var(--ui-range-thumb-size);
  }
  [is="ui-range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--ui-range-thumb-size);
      height: var(--ui-range-thumb-size);
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid var(--ui-gray, #a2a9b6);
      box-shadow: 50vw 0 0 calc(50vw - var(--ui-range-thumb-size)) var(--ui-border, #d0d0d5);
      transition: border-color var(--ui-animate-time, .2s), background-color var(--ui-animate-time, .2s);
      margin-top: calc((var(--ui-range-thumb-size) - var(--ui-range-track-hegiht)) * -0.5);
      clip-path: polygon(0 0, 100% 0, 100% 6px, 50vw 6px, 50vw 10px, 100% 10px, 100% 100%, 0 100%);
  }
  [is="ui-range"]::-webkit-slider-thumb:active {
      background-color: var(--ui-light,#f7f9fa);
  }
  
  /* Firefox */
  [is="ui-range"]::-moz-range-track {
      background: var(--ui-border, #d0d0d5);
      height: 4px;
  }
  
  [is="ui-rate"]::-moz-range-track {
      background: var(--ui-border, #d0d0d5);
      height: inherit;
  }
  
  [is="ui-range"]::-moz-range-progress {
      background: var(--ui-blue, #2a80eb);
      height: 4px;
  }
  
  [is="ui-range"]::-moz-range-thumb {
      width: var(--ui-range-thumb-size);
      height: var(--ui-range-thumb-size);
      border: none;
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid var(--ui-gray, #a2a9b6);
  }
  
  /* 星星评分 */
  [is="ui-rate"]:enabled {
      cursor: pointer;
  }
  [is="ui-rate"]:disabled {
      opacity: var(--ui-opacity, .4);
  }
  [is="ui-rate"] {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      outline: 0;
      background-color: transparent;
      vertical-align: middle;
      width: calc(var(--number, 5) * 2em);
      --mask-url: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0l1.693 3.67 4.013.476L8.74 6.89l.788 3.964L6 8.88l-3.527 1.974.788-3.964L.294 4.146l4.013-.476L6 0z'/%3E%3C/svg%3E");
      --mask: var(--mask-url) repeat-x left / 2em 100%;
  }
    
  [is="ui-rate"]::-webkit-slider-runnable-track {
      background: var(--ui-orange, #f59b00);
      height: 2em;
      -webkit-mask: var(--mask);
      mask: var(--mask);
  }
  
  [is="ui-rate"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 1px;
      height: 100%;
      box-shadow: 999em 0 0 999em var(--ui-light-border, #ededef);
  }
  
  [is="ui-rate"]:focus::-webkit-slider-thumb {
      box-shadow: 999em 0 0 999em var(--ui-light-border, #ededef);
      background: var(--ui-orange, #f59b00);
  }
  [is="ui-rate"][readonly] {
      cursor: default;
      pointer-events: none;
  }
  
  /* 兼容火狐浏览器 */
  [is="ui-rate"],
  _::-moz-range-track {
      appearance: none;
      -webkit-mask: var(--mask);
      mask: var(--mask);
      height: 2em;
  }
  
  [is="ui-rate"]::-moz-range-progress {
      background: var(--ui-orange, #f59b00);
      height: inherit;
  }
  
  [is="ui-rate"]::-moz-range-thumb {
      width: 0;
      opacity: 0;
  }