Developer

Intros How it works API reference Turbo CSS Fundamentals Utilities Selectors Child Next sibling After sibling Descendant Self Viewport width Device type Hoverable Empty Not empty Even Odd First Not first Last Not last Hover Focus Active Visited Valid Invalid Enabled Disabled Checked Unchecked Mode Placeholder Selection Before After Thumb Tags Download Turbo UI

Combinators

Child Next sibling After sibling Descendant Self

Viewport

Viewport width

Device

Device type Hoverable

DOM Structure

Empty Not empty Even Odd First Not first Last Not last

Interaction

Hover Focus Active Visited

State

Valid Invalid Enabled Disabled Checked Unchecked Mode

Pseudo elements

Placeholder Selection Before After Thumb

Thumb

Syntax

Class

Properties

{...}thumb:{...}

{...}::slider-thumb{...}

1
<input type="range" class="t1 w-256 h-5 appearance
    -none bg-c-white shadow-4-40 rounded-full outline
    -0 focus:b-1-blue-600 thumb:w-20 thumb:h-20 thumb
    :b-0 thumb:appearance-none thumb:rounded-full 
    thumb:cursor-pointer thumb:bg-c-blue thumb:focus
    :bg-c-blue-700 thumb:shadow-4-60">
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.

Make the slider thumb blue.

t1 thumb:bg-c-hex-2080E0

.t1.thumb\:bg-c-hex-2080E0::slider-thumb { background-color: #2080E0; }