Upward (default)
Min a la derecha, Max a la izquierda
<arc-slider></arc-slider>
Downward (clockwise)
Min a la derecha, Max a la izquierda
<arc-slider clockwise></arc-slider>
Upward - Custom Colors
Min a la derecha, Max a la izquierda
<arc-slider color1="#22C55E" color2="#3B82F6"></arc-slider>
Downward - Temperature
16°C a la derecha, 30°C a la izquierda
<arc-slider clockwise min-range="16" max-range="30"></arc-slider>
Upward + Reverse
Min a la IZQUIERDA, Max a la DERECHA
<arc-slider reverse></arc-slider>
Quarter Arc (Upper Right)
Arc from 270° to 0° (top-right quadrant)
<arc-slider start-angle="270" end-angle="0"></arc-slider>
Downward - Disabled
Non-interactive smile slider
<arc-slider clockwise disabled arc-value="75"></arc-slider>
Upward - Custom Size
Smaller radius with thicker stroke
<arc-slider radius="60" stroke-width="12"></arc-slider>
Value Position: Top
Value display above the arc
<arc-slider value-position="top"></arc-slider>
Value Position: Center
Value display centered in the arc
<arc-slider value-position="center"></arc-slider>
Value on Thumb
Badge showing value on the thumb
<arc-slider show-value-on-thumb hide-value></arc-slider>
Show Limits
Min/Max values at arc ends
<arc-slider show-limits></arc-slider>
Show Ticks
Numeric tick marks along the arc
<arc-slider show-ticks="5"></arc-slider>
Combined Features
Limits + Ticks + Thumb Value
<arc-slider show-limits show-ticks="4" show-value-on-thumb hide-value></arc-slider>
Interactive Playground
Try different configurations
<arc-slider></arc-slider>