canonical / canonical/vanilla-framework
Make disabled state of Range input more obvious
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Component/pattern to amend
[Range Input](https://vanillaframework.io/docs/base/forms#range)
## Visual

## Context
I found the `disabled` Range input to be visually very similar to the non-disabled version because of the following reasons:
- The color for the `disabled` range input looks very similar to the non-disabled version.
- The pointer also does not change to the "not-allowed" or "default" state. It keeps being a "cursor" type.
In comparison other form inputs (like the [Checkbox](https://vanillaframework.io/docs/base/forms#checkbox)) change the color to gray and the cursor to "not-allowed" when the input is `disabled`.
Contributor guide
Research direction
Start with the linked Range Input component and compare its disabled presentation with the Checkbox behavior described in the issue. Done means the disabled range input is clearly distinct through a gray-like color and an appropriate non-interactive cursor.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, sass
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100