BlueStack.io - Component Library

Basic Slider

Preview Code

Copy

Volume

50%

Brightness (Optional)

75%

<div class="space-y-4">
  <div class="slider-container">
    <div class="slider-header">
      <label class="slider-label">Volume</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
          tabindex="0"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">50%</div>
  </div>

  <div class="slider-container">
    <div class="slider-header">
      <label class="slider-label">Brightness</label>
      <span class="slider-sublabel">(Optional)</span>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 75%"></div>
        <div
          class="slider-handle"
          style="left: 75%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="75"
          tabindex="0"
        >
          <div class="slider-tooltip">75%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">75%</div>
  </div>
</div>

<div class="space-y-4">
                
                <div class="slider-container">
                    <div class="slider-header">
                        <label class="slider-label">Volume</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 50%;"></div>
                            <div class="slider-handle" style="left: 50%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" 
                                 tabindex="0">
                                <div class="slider-tooltip">50%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">50%</div>
                </div>

<div class="slider-container">
                    <div class="slider-header">
                        <label class="slider-label">Brightness</label>
                        <span class="slider-sublabel">(Optional)</span>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 75%;"></div>
                            <div class="slider-handle" style="left: 75%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" 
                                 tabindex="0">
                                <div class="slider-tooltip">75%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">75%</div>
                </div>
            </div>

Size Variants

Preview Code

Copy

Tiny Slider

30%

Small Slider

45%

Default Slider

60%

Large Slider

70%

Big Slider

85%

<div class="space-y-6">
  <div class="slider-container tiny">
    <div class="slider-header">
      <label class="slider-label">Tiny Slider</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 30%"></div>
        <div
          class="slider-handle"
          style="left: 30%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="30"
          tabindex="0"
        >
          <div class="slider-tooltip">30%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">30%</div>
  </div>

  <div class="slider-container small">
    <div class="slider-header">
      <label class="slider-label">Small Slider</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 45%"></div>
        <div
          class="slider-handle"
          style="left: 45%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="45"
          tabindex="0"
        >
          <div class="slider-tooltip">45%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">45%</div>
  </div>

  <div class="slider-container">
    <div class="slider-header">
      <label class="slider-label">Default Slider</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 60%"></div>
        <div
          class="slider-handle"
          style="left: 60%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="60"
          tabindex="0"
        >
          <div class="slider-tooltip">60%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">60%</div>
  </div>

  <div class="slider-container large">
    <div class="slider-header">
      <label class="slider-label">Large Slider</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 70%"></div>
        <div
          class="slider-handle"
          style="left: 70%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="70"
          tabindex="0"
        >
          <div class="slider-tooltip">70%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">70%</div>
  </div>

  <div class="slider-container big">
    <div class="slider-header">
      <label class="slider-label">Big Slider</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 85%"></div>
        <div
          class="slider-handle"
          style="left: 85%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="85"
          tabindex="0"
        >
          <div class="slider-tooltip">85%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">85%</div>
  </div>
</div>

<div class="space-y-6">
                
                <div class="slider-container tiny">
                    <div class="slider-header">
                        <label class="slider-label">Tiny Slider</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 30%;"></div>
                            <div class="slider-handle" style="left: 30%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" 
                                 tabindex="0">
                                <div class="slider-tooltip">30%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">30%</div>
                </div>

<div class="slider-container small">
                    <div class="slider-header">
                        <label class="slider-label">Small Slider</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 45%;"></div>
                            <div class="slider-handle" style="left: 45%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="45" 
                                 tabindex="0">
                                <div class="slider-tooltip">45%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">45%</div>
                </div>

<div class="slider-container">
                    <div class="slider-header">
                        <label class="slider-label">Default Slider</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 60%;"></div>
                            <div class="slider-handle" style="left: 60%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" 
                                 tabindex="0">
                                <div class="slider-tooltip">60%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">60%</div>
                </div>

<div class="slider-container large">
                    <div class="slider-header">
                        <label class="slider-label">Large Slider</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 70%;"></div>
                            <div class="slider-handle" style="left: 70%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" 
                                 tabindex="0">
                                <div class="slider-tooltip">70%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">70%</div>
                </div>

<div class="slider-container big">
                    <div class="slider-header">
                        <label class="slider-label">Big Slider</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 85%;"></div>
                            <div class="slider-handle" style="left: 85%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="85" 
                                 tabindex="0">
                                <div class="slider-tooltip">85%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">85%</div>
                </div>
            </div>

Color Variants

Preview Code

Copy

Primary

Positive

Negative

Warning

Info

<div class="space-y-4">
  <div class="slider-container primary">
    <div class="slider-header">
      <label class="slider-label">Primary</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 40%"></div>
        <div
          class="slider-handle"
          style="left: 40%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="40"
          tabindex="0"
        >
          <div class="slider-tooltip">40%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container positive">
    <div class="slider-header">
      <label class="slider-label">Positive</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 80%"></div>
        <div
          class="slider-handle"
          style="left: 80%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="80"
          tabindex="0"
        >
          <div class="slider-tooltip">80%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container negative">
    <div class="slider-header">
      <label class="slider-label">Negative</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 25%"></div>
        <div
          class="slider-handle"
          style="left: 25%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="25"
          tabindex="0"
        >
          <div class="slider-tooltip">25%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container warning">
    <div class="slider-header">
      <label class="slider-label">Warning</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 60%"></div>
        <div
          class="slider-handle"
          style="left: 60%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="60"
          tabindex="0"
        >
          <div class="slider-tooltip">60%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container info">
    <div class="slider-header">
      <label class="slider-label">Info</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 55%"></div>
        <div
          class="slider-handle"
          style="left: 55%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="55"
          tabindex="0"
        >
          <div class="slider-tooltip">55%</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="space-y-4">
                
                <div class="slider-container primary">
                    <div class="slider-header">
                        <label class="slider-label">Primary</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 40%;"></div>
                            <div class="slider-handle" style="left: 40%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" 
                                 tabindex="0">
                                <div class="slider-tooltip">40%</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slider-container positive">
                    <div class="slider-header">
                        <label class="slider-label">Positive</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 80%;"></div>
                            <div class="slider-handle" style="left: 80%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" 
                                 tabindex="0">
                                <div class="slider-tooltip">80%</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slider-container negative">
                    <div class="slider-header">
                        <label class="slider-label">Negative</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 25%;"></div>
                            <div class="slider-handle" style="left: 25%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" 
                                 tabindex="0">
                                <div class="slider-tooltip">25%</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slider-container warning">
                    <div class="slider-header">
                        <label class="slider-label">Warning</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 60%;"></div>
                            <div class="slider-handle" style="left: 60%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" 
                                 tabindex="0">
                                <div class="slider-tooltip">60%</div>
                            </div>
                        </div>
                    </div>
                </div>

Extended Color Palette

Preview Code

Copy

Red

Orange

Yellow

Green

Teal

Blue

Violet

Purple

Pink

<div class="grid grid-cols-2 gap-4">
  <div class="slider-container red">
    <label class="slider-label">Red</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container orange">
    <label class="slider-label">Orange</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container yellow">
    <label class="slider-label">Yellow</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container green">
    <label class="slider-label">Green</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container teal">
    <label class="slider-label">Teal</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container blue">
    <label class="slider-label">Blue</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container violet">
    <label class="slider-label">Violet</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container purple">
    <label class="slider-label">Purple</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="slider-container pink">
    <label class="slider-label">Pink</label>
    <div class="slider">
      <div class="slider-track">
        <div class="slider-fill" style="width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 50%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
        >
          <div class="slider-tooltip">50%</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="slider-container orange">
                    <label class="slider-label">Orange</label>
                    <div class="slider">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 50%;"></div>
                            <div class="slider-handle" style="left: 50%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
                                <div class="slider-tooltip">50%</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slider-container yellow">
                    <label class="slider-label">Yellow</label>
                    <div class="slider">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 50%;"></div>
                            <div class="slider-handle" style="left: 50%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
                                <div class="slider-tooltip">50%</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slider-container green">
                    <label class="slider-label">Green</label>
                    <div class="slider">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 50%;"></div>
                            <div class="slider-handle" style="left: 50%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
                                <div class="slider-tooltip">50%</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slider-container violet">
                    <label class="slider-label">Violet</label>
                    <div class="slider">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 50%;"></div>
                            <div class="slider-handle" style="left: 50%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
                                <div class="slider-tooltip">50%</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slider-container purple">
                    <label class="slider-label">Purple</label>
                    <div class="slider">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 50%;"></div>
                            <div class="slider-handle" style="left: 50%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
                                <div class="slider-tooltip">50%</div>
                            </div>
                        </div>
                    </div>
                </div>

Stepped Slider

Preview Code

Copy

Step by 10

0 20 40 60 80 100

40%

Step by 25

0 25 50 75 100

75%

<div class="space-y-4">
  <div class="slider-container">
    <div class="slider-header">
      <label class="slider-label">Step by 10</label>
    </div>
    <div class="slider" data-step="10">
      <div class="slider-track">
        <div class="slider-fill" style="width: 40%"></div>
        <div
          class="slider-handle"
          style="left: 40%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="40"
          tabindex="0"
        >
          <div class="slider-tooltip">40%</div>
        </div>
      </div>
      <div class="slider-marks">
        <span class="slider-mark" style="left: 0%">0</span>
        <span class="slider-mark" style="left: 20%">20</span>
        <span class="slider-mark" style="left: 40%">40</span>
        <span class="slider-mark" style="left: 60%">60</span>
        <span class="slider-mark" style="left: 80%">80</span>
        <span class="slider-mark" style="left: 100%">100</span>
      </div>
    </div>
    <div class="slider-value">40%</div>
  </div>

  <div class="slider-container primary">
    <div class="slider-header">
      <label class="slider-label">Step by 25</label>
    </div>
    <div class="slider" data-step="25">
      <div class="slider-track">
        <div class="slider-fill" style="width: 75%"></div>
        <div
          class="slider-handle"
          style="left: 75%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="75"
          tabindex="0"
        >
          <div class="slider-tooltip">75%</div>
        </div>
      </div>
      <div class="slider-marks">
        <span class="slider-mark" style="left: 0%">0</span>
        <span class="slider-mark" style="left: 25%">25</span>
        <span class="slider-mark" style="left: 50%">50</span>
        <span class="slider-mark" style="left: 75%">75</span>
        <span class="slider-mark" style="left: 100%">100</span>
      </div>
    </div>
    <div class="slider-value">75%</div>
  </div>
</div>

Range Slider (Two Handles)

Preview Code

Copy

Price Range

$25 - $60

Time Range

07:12 - 16:48

<div class="space-y-4">
  <div class="slider-container range primary">
    <div class="slider-header">
      <label class="slider-label">Price Range</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="left: 25%; width: 35%"></div>
        <div
          class="slider-handle"
          style="left: 25%"
          role="slider"
          data-handle="min"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="25"
          tabindex="0"
        >
          <div class="slider-tooltip">$25</div>
        </div>
        <div
          class="slider-handle"
          style="left: 60%"
          role="slider"
          data-handle="max"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="60"
          tabindex="0"
        >
          <div class="slider-tooltip">$60</div>
        </div>
      </div>
    </div>
    <div class="slider-value">$25 - $60</div>
  </div>

  <div class="slider-container range positive">
    <div class="slider-header">
      <label class="slider-label">Time Range</label>
    </div>
    <div class="slider" data-step="5">
      <div class="slider-track">
        <div class="slider-fill" style="left: 30%; width: 40%"></div>
        <div
          class="slider-handle"
          style="left: 30%"
          role="slider"
          data-handle="min"
          aria-valuemin="0"
          aria-valuemax="24"
          aria-valuenow="7.2"
          tabindex="0"
        >
          <div class="slider-tooltip">07:12</div>
        </div>
        <div
          class="slider-handle"
          style="left: 70%"
          role="slider"
          data-handle="max"
          aria-valuemin="0"
          aria-valuemax="24"
          aria-valuenow="16.8"
          tabindex="0"
        >
          <div class="slider-tooltip">16:48</div>
        </div>
      </div>
    </div>
    <div class="slider-value">07:12 - 16:48</div>
  </div>
</div>

<div class="space-y-4">
                <div class="slider-container range primary">
                    <div class="slider-header">
                        <label class="slider-label">Price Range</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="left: 25%; width: 35%;"></div>
                            <div class="slider-handle" style="left: 25%;" role="slider" 
                                 data-handle="min"
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" 
                                 tabindex="0">
                                <div class="slider-tooltip">$25</div>
                            </div>
                            <div class="slider-handle" style="left: 60%;" role="slider"
                                 data-handle="max" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" 
                                 tabindex="0">
                                <div class="slider-tooltip">$60</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">$25 - $60</div>
                </div>

<div class="slider-container range positive">
                    <div class="slider-header">
                        <label class="slider-label">Time Range</label>
                    </div>
                    <div class="slider" data-step="5">
                        <div class="slider-track">
                            <div class="slider-fill" style="left: 30%; width: 40%;"></div>
                            <div class="slider-handle" style="left: 30%;" role="slider" 
                                 data-handle="min"
                                 aria-valuemin="0" aria-valuemax="24" aria-valuenow="7.2" 
                                 tabindex="0">
                                <div class="slider-tooltip">07:12</div>
                            </div>
                            <div class="slider-handle" style="left: 70%;" role="slider"
                                 data-handle="max" 
                                 aria-valuemin="0" aria-valuemax="24" aria-valuenow="16.8" 
                                 tabindex="0">
                                <div class="slider-tooltip">16:48</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">07:12 - 16:48</div>
                </div>
            </div>

Custom Value Ranges

Preview Code

Copy

Temperature

22°C

Budget

$3,500

<div class="space-y-4">
  <div class="slider-container warning">
    <div class="slider-header">
      <label class="slider-label">Temperature</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 55%"></div>
        <div
          class="slider-handle"
          style="left: 55%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="40"
          aria-valuenow="22"
          tabindex="0"
        >
          <div class="slider-tooltip">22°C</div>
        </div>
      </div>
    </div>
    <div class="slider-value">22°C</div>
  </div>

  <div class="slider-container positive">
    <div class="slider-header">
      <label class="slider-label">Budget</label>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 35%"></div>
        <div
          class="slider-handle"
          style="left: 35%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="10000"
          aria-valuenow="3500"
          tabindex="0"
        >
          <div class="slider-tooltip">$3,500</div>
        </div>
      </div>
    </div>
    <div class="slider-value">$3,500</div>
  </div>
</div>

<div class="space-y-4">
                
                <div class="slider-container warning">
                    <div class="slider-header">
                        <label class="slider-label">Temperature</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 55%;"></div>
                            <div class="slider-handle" style="left: 55%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="40" aria-valuenow="22" 
                                 tabindex="0">
                                <div class="slider-tooltip">22°C</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">22°C</div>
                </div>

<div class="slider-container positive">
                    <div class="slider-header">
                        <label class="slider-label">Budget</label>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 35%;"></div>
                            <div class="slider-handle" style="left: 35%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="10000" aria-valuenow="3500" 
                                 tabindex="0">
                                <div class="slider-tooltip">$3,500</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">$3,500</div>
                </div>
            </div>

Vertical Orientation

Preview Code

Copy

Volume

60%

Bass

40%

Treble

75%

<div class="flex gap-8 items-center">
  <div class="slider-container vertical" style="height: 200px">
    <label class="slider-label">Volume</label>
    <div class="slider vertical" style="height: 150px">
      <div class="slider-track">
        <div class="slider-fill" style="height: 60%"></div>
        <div
          class="slider-handle"
          style="bottom: 60%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="60"
          tabindex="0"
        >
          <div class="slider-tooltip">60%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">60%</div>
  </div>

  <div class="slider-container vertical primary" style="height: 200px">
    <label class="slider-label">Bass</label>
    <div class="slider vertical" style="height: 150px">
      <div class="slider-track">
        <div class="slider-fill" style="height: 40%"></div>
        <div
          class="slider-handle"
          style="bottom: 40%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="40"
          tabindex="0"
        >
          <div class="slider-tooltip">40%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">40%</div>
  </div>

  <div class="slider-container vertical positive" style="height: 200px">
    <label class="slider-label">Treble</label>
    <div class="slider vertical" style="height: 150px">
      <div class="slider-track">
        <div class="slider-fill" style="height: 75%"></div>
        <div
          class="slider-handle"
          style="bottom: 75%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="75"
          tabindex="0"
        >
          <div class="slider-tooltip">75%</div>
        </div>
      </div>
    </div>
    <div class="slider-value">75%</div>
  </div>
</div>

<div class="flex gap-8 items-center">
                <div class="slider-container vertical" style="height: 200px;">
                    <label class="slider-label">Volume</label>
                    <div class="slider vertical" style="height: 150px;">
                        <div class="slider-track">
                            <div class="slider-fill" style="height: 60%;"></div>
                            <div class="slider-handle" style="bottom: 60%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" 
                                 tabindex="0">
                                <div class="slider-tooltip">60%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">60%</div>
                </div>

<div class="slider-container vertical positive" style="height: 200px;">
                    <label class="slider-label">Treble</label>
                    <div class="slider vertical" style="height: 150px;">
                        <div class="slider-track">
                            <div class="slider-fill" style="height: 75%;"></div>
                            <div class="slider-handle" style="bottom: 75%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" 
                                 tabindex="0">
                                <div class="slider-tooltip">75%</div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-value">75%</div>
                </div>
            </div>

Live Update Example

Preview Code

Copy

Opacity Control 70%

Live Preview

Drag the slider to change opacity

<div class="space-y-4">
  <div class="slider-container primary" data-live-update="true">
    <div class="slider-header">
      <label class="slider-label">Opacity Control</label>
      <span class="live-value text-blue-600 font-semibold ml-auto">70%</span>
    </div>
    <div class="slider" data-step="1">
      <div class="slider-track">
        <div class="slider-fill" style="width: 70%"></div>
        <div
          class="slider-handle"
          style="left: 70%"
          role="slider"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="70"
          tabindex="0"
        >
          <div class="slider-tooltip">70%</div>
        </div>
      </div>
    </div>
  </div>

  <div
    class="preview-box bg-blue-600 text-white p-8 rounded-lg text-center transition-opacity"
    style="opacity: 0.7"
  >
    <p class="text-lg font-semibold">Live Preview</p>
    <p>Drag the slider to change opacity</p>
  </div>
</div>

<div class="space-y-4">
                <div class="slider-container primary" data-live-update="true">
                    <div class="slider-header">
                        <label class="slider-label">Opacity Control</label>
                        <span class="live-value text-blue-600 font-semibold ml-auto">70%</span>
                    </div>
                    <div class="slider" data-step="1">
                        <div class="slider-track">
                            <div class="slider-fill" style="width: 70%;"></div>
                            <div class="slider-handle" style="left: 70%;" role="slider" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" 
                                 tabindex="0">
                                <div class="slider-tooltip">70%</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div class="preview-box bg-blue-600 text-white p-8 rounded-lg text-center transition-opacity" 
                     style="opacity: 0.7;">
                    <p class="text-lg font-semibold">Live Preview</p>
                    <p>Drag the slider to change opacity</p>
                </div>
            </div>

Disabled State

Preview Code

Copy

Disabled Slider

50%

<div class="slider-container disabled">
  <div class="slider-header">
    <label class="slider-label">Disabled Slider</label>
  </div>
  <div class="slider" data-step="1">
    <div class="slider-track">
      <div class="slider-fill" style="width: 50%"></div>
      <div
        class="slider-handle"
        style="left: 50%"
        role="slider"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-valuenow="50"
        aria-disabled="true"
        tabindex="-1"
      >
        <div class="slider-tooltip">50%</div>
      </div>
    </div>
  </div>
  <div class="slider-value">50%</div>
</div>

Combined Features Example

Preview Code

Copy

Weekly Promotion Preferences (Select range)

Min 50% Max

20% - 70%

R

G

B

<div class="space-y-6">
  <div class="slider-container range large purple">
    <div class="slider-header">
      <label class="slider-label">Weekly Promotion Preferences</label>
      <span class="slider-sublabel">(Select range)</span>
    </div>
    <div class="slider" data-step="10">
      <div class="slider-track">
        <div class="slider-fill" style="left: 20%; width: 50%"></div>
        <div
          class="slider-handle"
          style="left: 20%"
          role="slider"
          data-handle="min"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="20"
          tabindex="0"
        >
          <div class="slider-tooltip">20%</div>
        </div>
        <div
          class="slider-handle"
          style="left: 70%"
          role="slider"
          data-handle="max"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="70"
          tabindex="0"
        >
          <div class="slider-tooltip">70%</div>
        </div>
      </div>
      <div class="slider-marks">
        <span class="slider-mark" style="left: 0%">Min</span>
        <span class="slider-mark" style="left: 50%">50%</span>
        <span class="slider-mark" style="left: 100%">Max</span>
      </div>
    </div>
    <div class="slider-value">20% - 70%</div>
  </div>

  <div class="grid grid-cols-3 gap-4">
    <div class="slider-container small red">
      <label class="slider-label text-xs">R</label>
      <div class="slider">
        <div class="slider-track">
          <div class="slider-fill" style="width: 85%"></div>
          <div
            class="slider-handle"
            style="left: 85%"
            role="slider"
            aria-valuemin="0"
            aria-valuemax="255"
            aria-valuenow="217"
          >
            <div class="slider-tooltip">217</div>
          </div>
        </div>
      </div>
    </div>

    <div class="slider-container small green">
      <label class="slider-label text-xs">G</label>
      <div class="slider">
        <div class="slider-track">
          <div class="slider-fill" style="width: 60%"></div>
          <div
            class="slider-handle"
            style="left: 60%"
            role="slider"
            aria-valuemin="0"
            aria-valuemax="255"
            aria-valuenow="153"
          >
            <div class="slider-tooltip">153</div>
          </div>
        </div>
      </div>
    </div>

    <div class="slider-container small blue">
      <label class="slider-label text-xs">B</label>
      <div class="slider">
        <div class="slider-track">
          <div class="slider-fill" style="width: 40%"></div>
          <div
            class="slider-handle"
            style="left: 40%"
            role="slider"
            aria-valuemin="0"
            aria-valuemax="255"
            aria-valuenow="102"
          >
            <div class="slider-tooltip">102</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="space-y-6">
                
                <div class="slider-container range large purple">
                    <div class="slider-header">
                        <label class="slider-label">Weekly Promotion Preferences</label>
                        <span class="slider-sublabel">(Select range)</span>
                    </div>
                    <div class="slider" data-step="10">
                        <div class="slider-track">
                            <div class="slider-fill" style="left: 20%; width: 50%;"></div>
                            <div class="slider-handle" style="left: 20%;" role="slider" 
                                 data-handle="min"
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" 
                                 tabindex="0">
                                <div class="slider-tooltip">20%</div>
                            </div>
                            <div class="slider-handle" style="left: 70%;" role="slider"
                                 data-handle="max" 
                                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" 
                                 tabindex="0">
                                <div class="slider-tooltip">70%</div>
                            </div>
                        </div>
                        <div class="slider-marks">
                            <span class="slider-mark" style="left: 0%;">Min</span>
                            <span class="slider-mark" style="left: 50%;">50%</span>
                            <span class="slider-mark" style="left: 100%;">Max</span>
                        </div>
                    </div>
                    <div class="slider-value">20% - 70%</div>
                </div>

slider Component

Slider Component

Basic Slider

Size Variants

Color Variants

Extended Color Palette

Stepped Slider

Range Slider (Two Handles)

Custom Value Ranges

Vertical Orientation

Live Update Example

Disabled State

Combined Features Example