Slider Underline Demo

Basic Usage

Simple slider with default settings.

Value: 50

<slider-underline label="Volume"></slider-underline>

Custom Range

Set min, max, and step values.

<slider-underline
  label="Temperature"
  min="0"
  max="40"
  value="22"
  unit="°C"
></slider-underline>

Step Values

Slider with larger step increments.

<slider-underline
  label="Quantity"
  min="0"
  max="100"
  step="10"
  value="50"
></slider-underline>

Value Positions

Different label positions for the value display.

Above (default)

Below

Tooltip

<!-- Above (default) -->
<slider-underline label="Brightness" value="75" unit="%"></slider-underline>

<!-- Below -->
<slider-underline label="Brightness" value="75" unit="%" label-position="below"></slider-underline>

<!-- Tooltip -->
<slider-underline label="Brightness" value="75" unit="%" label-position="tooltip"></slider-underline>

Without Value Display

Hide the value display entirely.

<slider-underline label="Silent Mode" show-value="false"></slider-underline>

Disabled State

Disabled slider that cannot be interacted with.

<slider-underline label="Locked" value="30" disabled></slider-underline>

Programmatic Control

Control the slider with JavaScript.

<slider-underline id="programmatic" label="Controlled" value="25"></slider-underline>

<script>
  const slider = document.getElementById('programmatic');
  slider.setValue(50);
  slider.increase();
  slider.decrease();
  slider.reset();
</script>

Custom Styling

Theme with CSS custom properties.

<!-- Green Theme -->
<slider-underline
  label="Green Theme"
  value="60"
  style="--slider-fill: #22c55e; --slider-thumb: #22c55e;"
></slider-underline>

<!-- Purple Large -->
<slider-underline
  label="Purple Large"
  value="40"
  style="--slider-fill: #8b5cf6; --slider-thumb: #8b5cf6; --slider-thumb-size: 28px; --slider-track-height: 8px;"
></slider-underline>

<!-- With Border -->
<slider-underline
  label="With Border"
  value="70"
  style="--slider-fill: #f59e0b; --slider-thumb: white; --slider-thumb-border: 3px solid #f59e0b;"
></slider-underline>

Custom Width

Set a specific width for the slider.

<slider-underline label="Fixed 300px" width="300px" value="50"></slider-underline>

<slider-underline label="Half width (50%)" width="50%" value="75"></slider-underline>

Scale with Ticks

Show tick marks on the slider scale.

<slider-underline label="With 10 Ticks" show-ticks="10" value="60"></slider-underline>

<slider-underline label="With 5 Ticks" show-ticks="5" value="40"></slider-underline>

Scale with Values

Show tick marks with their values displayed.

<!-- Volume -->
<slider-underline
  label="Volume"
  min="0"
  max="100"
  show-ticks="10"
  show-tick-values
  value="70"
  unit="%"
></slider-underline>

<!-- Temperature -->
<slider-underline
  label="Temperature"
  min="-20"
  max="40"
  show-ticks="6"
  show-tick-values
  value="22"
  unit="°C"
  width="400px"
></slider-underline>

<!-- Custom Range with styled ticks -->
<slider-underline
  label="Custom Range"
  min="0"
  max="1000"
  step="100"
  show-ticks="10"
  show-tick-values
  value="500"
  style="--slider-tick-color: #3b82f6; --slider-tick-value-color: #1d4ed8;"
></slider-underline>

Price Range Example

Real-world example with currency formatting.

<slider-underline
  label="Max Price"
  min="0"
  max="1000"
  step="50"
  value="500"
  unit="$"
  show-ticks="10"
  show-tick-values
></slider-underline>