Component

Range slider

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

Import jellyfy/range.css with jellyfy/material.css and jellyfy/motion.css. Or import jellyfy/jellyfy.css, which already includes this file and every other component.

Classes

Class	Type
range	Component	The label.
range-box	Part	The positioning box for the track and the thumb.
range-track	Part	The track.
range-fill	Part	The filled part. The script sets its width from the input.
range-thumb	Part	The thumb.
range-sm	Size	Small size
range-md	Size	Medium size (default)
range-lg	Size	Large size
primary	Color	Indigo by default.
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 thumb. 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

SmallMediumLarge

<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 thumb both sit on the small drop shadow. The track is a jelly surface, not only the thumb.