Topcoat

CSS for clean and fast web apps

Range

Examples

Show code snippets

HTML

<input type="range" class="topcoat-range">
<input type="range" class="topcoat-range" disabled>

CSS


.topcoat-range {
  border-radius: 6px;
  border: 1px solid #9daca9;
  background-color: #d6dcdb;
  height: 1rem;
  border-radius: 30px;
}

.topcoat-range::-moz-range-track {
  border-radius: 6px;
  border: 1px solid #9daca9;
  background-color: #d6dcdb;
  height: 1rem;
  border-radius: 30px;
}

.topcoat-range::-webkit-slider-thumb {
  height: 3rem;
  width: 2rem;
  background-color: #e5e9e8;
  border: 1px solid #9daca9;
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px #fff;
  box-shadow: inset 0 1px #fff;
}

.topcoat-range::-moz-range-thumb {
  height: 3rem;
  width: 2rem;
  background-color: #e5e9e8;
  border: 1px solid #9daca9;
  border-radius: 6px;
  box-shadow: inset 0 1px #fff;
}

.topcoat-range:focus::-webkit-slider-thumb {
  border: 1px solid #0036ff;
  -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

.topcoat-range:focus::-moz-range-thumb {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

.topcoat-range:active::-webkit-slider-thumb {
  border: 1px solid #9daca9;
  -webkit-box-shadow: inset 0 1px #fff;
  box-shadow: inset 0 1px #fff;
}

.topcoat-range:active::-moz-range-thumb {
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}