TyBs Patterns

Range Input 

<input type="range" min="1" max="100" step="1" value="50" />
 
<input type="range" min="{{ range_min }}" max="{{ range_max }}" step="{{ range_step }}" value="{{ range_value }}" />
 
{
  "range_min": "1",
  "range_max": "100",
  "range_step": "1",
  "range_value": "50"
}
  • Content: 
    input[type="range"] {
	-webkit-appearance: none !important;
	background-color: rgba(0,0,0,0.25);
	border: 0;
	border-radius: 2px;
	height: 4px;
	margin: calc(1rem - 2px) 0;
	min-width: 4rem;
	outline: none;
	width: 100%;
  &::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  background-color: white;
	  border: 4px var(--red) solid;
	  border-radius: 50%;
	  box-shadow: 1px 1px 3px rgba(0,0,0,0.33);
	  box-sizing: border-box;
	  height: 1.25rem;
	  width: 1.25rem;
  }
  &::-moz-range-thumb {
    -webkit-appearance: none;
    background-color: white;
    border: 4px var(--red) solid;
    border-radius: 50%;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.33);
    box-sizing: border-box;
    height: 1.25rem;
    width: 1.25rem;
  }
  &::-moz-range-progress {
	  -webkit-appearance: none !important;
	  background-color: var(--red);
	  border-radius: 2px;
    height: 4px;
  }
}
  • URL: /components/raw/range/range.scss
  • Filesystem Path: source/patterns/atoms/range/range.scss
  • Size: 882 Bytes

Range

This component is the element <input type="range">. Bootstrap 4 does not have a component for this input element, so one is provided by this pattern.