canonical / canonical/vanilla-framework

Make disabled state of Range input more obvious

Open
#5,417 3 comments 0 reactions 0 assignees View on GitHub
Triaged: v4 Vanilla WG WG: Validated
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

![MissingLabelsForInput](https://github.com/user-attachments/assets/cb2fb573-f016-47ab-a7bf-1345a03073ba)

## 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.