Skip to content

Slider: what should always look the same, and what should be adjustable? #150

@lifeiscontent

Description

@lifeiscontent

Hi @bhaveshraja, I'm tightening up the slider in our kit and want your call on the defaults.

For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?

  1. The filled part of the track. The part of the track up to the handle fills with our accent blue. Should that always be the accent blue, or should some places be able to tint it?

  2. The empty track behind it. The rest of the track sits on a soft grey, and it's a thin pill-shaped bar (about 4px tall). Should that color and thickness always be the same, or adjustable?

  3. The handle. The draggable knob is a small white circle with a blue outline and a soft raised shadow, and on keyboard focus it shows a blue ring around it. Should that handle always look that way, or adjustable?

  4. The label. The label ("Volume") is 14px in our primary text color, medium weight. Always that, or adjustable?

  5. The value readout. The current number shows at 13px in our secondary grey. Should that always show, in that size and color, or adjustable (and should some sliders hide it)?

  6. Where the value sits. Right now the label and the number share a row above the track. Should that layout always be the same, or could some places want the number somewhere else?

Anything you mark "always," I'll build in. Anything that's "depends," I'll leave open for the team. Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requested

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions