Styling input range

<form method='post' action='data:text/plain, Form submited.' oninput='result.value=distance.value'>
  <p>Nearby:<br><input type='text' placeholder='restaurants, ATM'></p>
    Within distance:
    <output name='result' for='distance'>100</output>
    <input name='distance' type='range' value='100' max='2000' min='100' step='100'>
  <p><input type='submit' value='Search'></p>
input[type="range"] {
  appearance: none;
  background: #efefef;

  &::-webkit-slider-thumb {
    @include greeny-ui;
    appearance: none;    
    width: 30px;
    height: 30px;
    border-radius: 50%;

  /* TODO: add moz and ms styles too */

input range

The live demo:

See the Pen An example of styling range input for mobile device by Thomas Seng Hin Mak (@makzan) on CodePen.

Next Page → Using file button

← Previous Page Styling radio button

Last updated at 2017-05-10. Show version history


no comments yet.