Part 7—Form inputs

37 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>
  <p>
    Within distance:
    <output name='result' for='distance'>100</output>
    m
    <br>
    <input name='distance' type='range' value='100' max='2000' min='100' step='100'>
  </p>
  <p><input type='submit' value='Search'></p>
</form>
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:

License

Styling input range Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.