Component

Slider

A soft track and a handle. The fill follows the input.

Classes

Class	Type
range	Component	The label.
range-box	Part	The positioning box for the track and the handle.
range-track	Part	The track.
range-fill	Part	The filled part. The script sets its width from the input.
range-thumb	Part	The handle.
range-sm	Size	Small.
range-lg	Size	Large.
primary	Color	Indigo by default. Used when you set no color.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.

Track

startJellyfy() reads the input and moves the fill and the handle. Without that call, the fill stays put.

Volume

<label class="range primary">
  Volume
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>

Colors

PrimarySecondaryTertiaryNeutralSuccessErrorWarningInfo

<label class="range primary">
  Primary
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>
<label class="range secondary">
  Secondary
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>
<label class="range tertiary">
  Tertiary
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>
<label class="range neutral">
  Neutral
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>
<label class="range success">
  Success
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>
<label class="range error">
  Error
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>
<label class="range warning">
  Warning
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>
<label class="range info">
  Info
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="62">
  </span>
</label>

Sizes

SmallRegularLarge

<label class="range range-lg">
  Large
  <span class="range-box">
    <span class="range-track"><span class="range-fill"></span></span>
    <span class="range-thumb"></span>
    <input type="range" value="40">
  </span>
</label>

The track and the handle both sit on the small drop shadow. The track is a jelly surface, not only the handle.