Skip to content

Soracom

Design System
Home Design System Elements Range

Range

stable dark-mode

Options 

Basic usage  

<div class="ds-range">
  <input type="range">
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-range">
  <input type="range">
</div>
Example disabled state 
<div class="ds-range">
  <input type="range" disabled>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-range">
  <input type="range" disabled>
</div>

Button inside range 

ds-button can be used inside ds-range.

<div class="ds-range">
  <input type="range">
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
<!-- Inside ds-range ds-button primary-->
<div class="ds-range">
  <input type="range">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
<!-- Inside ds-range ds-button plain-->
<div class="ds-range">
  <input type="range">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-range">
  <input type="range">
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
<!-- Inside ds-range ds-button primary-->
<div class="ds-range">
  <input type="range">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
<!-- Inside ds-range ds-button plain-->
<div class="ds-range">
  <input type="range">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <input type="range">
</div>

Text addon inside range 

ds-text can be used inside ds-range. See ds-text for further examples.

<div class="ds-range">
  <input type="range">
  <div class="ds-text">空色 Sky blue</div>
</div>
<div class="ds-range">
  <div class="ds-text">空色 Sky blue</div>
  <input type="range">
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-range">
  <input type="range">
  <div class="ds-text">空色 Sky blue</div>
</div>
<div class="ds-range">
  <div class="ds-text">空色 Sky blue</div>
  <input type="range">
</div>

Icon inside range 

ds-text can be used inside ds-range. See ds-text for further examples.

<div class="ds-range">
  <input type="range">
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
</div>
<div class="ds-range">
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
  <input type="range">
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-range">
  <input type="range">
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
</div>
<div class="ds-range">
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
  <input type="range">
</div>
<div class="ds-range">
  <i class="ds-icon --icon-toy-horse --bottom" data-ds-texttip="Text"></i>
  <input type="range" min="1" max="12" step="1">
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-range">
  <i class="ds-icon --icon-toy-horse --bottom" data-ds-texttip="Text"></i>
  <input type="range" min="1" max="12" step="1">
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
</div>

Range with tick marks  

<div class="ds-range">
  <i class="ds-icon --icon-toy-horse --bottom" data-ds-texttip="Text"></i>
  <span>
    <input type="range" min="1" max="12" step="1" list="markers">
    <datalist id="markers">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
      <option value="9"></option>
      <option value="10"></option>
      <option value="11"></option>
      <option value="12"></option>
    </datalist>
  </span>
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-range">
  <i class="ds-icon --icon-toy-horse --bottom" data-ds-texttip="Text"></i>
  <span>
    <input type="range" min="1" max="12" step="1" list="markers">
    <datalist id="markers">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="7"></option>
      <option value="8"></option>
      <option value="9"></option>
      <option value="10"></option>
      <option value="11"></option>
      <option value="12"></option>
    </datalist>
  </span>
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
</div>

Range with tick marks and labels 

ds-range accomodates labels up to 5 characters in length.

<div class="ds-range">
  <i class="ds-icon --icon-toy-horse --bottom" data-ds-texttip="Text"></i>
  <span>
    <input type="range" min="1" max="12" step="1" list="markers">
    <datalist id="markers">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </datalist>
  </span>
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-range">
  <i class="ds-icon --icon-toy-horse --bottom" data-ds-texttip="Text"></i>
  <span>
    <input type="range" min="1" max="12" step="1" list="markers">
    <datalist id="markers">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </datalist>
  </span>
  <i class="ds-icon --icon-rocket --bottom" data-ds-texttip="Text"></i>
</div>
Copyright © 2015-2024 Soracom, Inc.
Last page update: February 28, 2023
ec1816f4