<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-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-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="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="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>

<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 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="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="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="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>

<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>