{#snippet template(args)}

Value: {args.value}

Hover over thumb to see scale effect, click and drag to interact

{/snippet} {#snippet template(args)}

Value: {args.value}

Vertical orientation with same red accent

{/snippet} {#snippet template(args)}

Slider with inline label

{/snippet} {#snippet template(args)}

Thumb: 45° rotated square

Hover State (scale-125)

Different Values

Focus State (ring-2 ring-[#ff3b30]/20)

Tab to the thumb to see focus ring

{/snippet} {#snippet template(args)}

Step: 1 (default)

Step: 10

Step: 25

{/snippet}