Skip to content

Soracom

Design System
Home Design System Elements Range

Range

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 addon inside range 

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

Text addon inside range 

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