Skip to content

add style for disabled sliders #31

@milahu

Description

@milahu

i use <input type="slider" disabled> for output values

disabled sliders are read-only, and should have a different style than writable sliders

for example:

/* disable color + cursor */
input[type=range][disabled]::-webkit-slider-thumb {
  background: grey;
  cursor: default;
}
input[type=range][disabled]::-webkit-slider-runnable-track {
  cursor: default;
}

/* disable hover color */
input[type=range][disabled]:hover::-webkit-slider-runnable-track {
  background: white;
}
input[type=range][disabled]:hover::-webkit-slider-thumb {
  background: grey;
}

/* hover color */
input[type=range]:hover::-webkit-slider-runnable-track {
  background: lightgray;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions