skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Slider

Create a customizable Slider component for selecting numerical values with keyboard accessibility.

Updated Aug 23, 2026
Search Tags:#accessibility#ui component#slider#input range#interactive element#form control
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-slider
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Slider
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Slider
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-slider

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a user-friendly and accessible way to select a value within a defined range, commonly used for settings, filters, or progress indicators.

Core Features & Use Cases

  • Single Value Selection: Allows users to pick a single numerical value.
  • Customizable Range: Supports defining minimum, maximum, and step values.
  • Visual Feedback: Includes optional tooltips for displaying the current value during interaction.
  • Accessibility: Supports keyboard navigation for value adjustment.
  • Use Case: Adjusting the volume on a media player, setting a price range in an e-commerce filter, or configuring a sensitivity level in an application setting.

Quick Start

Use the Slider component to set a value between 0 and 100, with a default of 50.

Frequently Asked Questions about use-design-system/Slider

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add an accessible slider component for range selection in my UI?▼

An accessible slider component allows single numerical value selection within a specified range. It supports keyboard navigation for intuitive user control, ensuring users can adjust values without a mouse.

Can I set custom minimum, maximum, and step values for an input range slider?▼

You can define custom minimum, maximum, and step values for the input range slider. This allows precise control over the selectable numerical increments available to the user during interaction.

How does a UI slider display real-time values during user interaction?▼

The UI slider provides visual feedback through optional tooltips. These tooltips display the current numerical value in real-time as the user drags the interactive element across the range.

What are common use cases for implementing an interactive range slider?▼

Common use cases for an interactive range slider include adjusting volume on a media player, setting a price range in e-commerce filters, or configuring sensitivity levels in application settings.

Does the keyboard accessible slider support single value selection only?▼

The keyboard accessible slider supports single numerical value selection only. It is designed to pick one specific value within a defined minimum and maximum range boundary.

Are there limitations when using a range slider for multi-value form controls?▼

The range slider is limited to single value selection and does not natively support multi-value form controls. You should not use this component if your form control requires selecting multiple discrete values simultaneously.

Related Skills

Explore More Design & Creative Skills→
legoutlegout
3

using-streamlit-layouts

Structure Streamlit application interfaces with columns, containers, and sidebars.

Community
Intermediate
lanes-shlanes-sh
253

lanes-forms

Create and submit forms with email delivery for Claude Code workflows.

Official
Intermediate
lord-vinayaklord-vinayak

keyboard-focus-auditor

Audits web keyboard accessibility including tab order and WCAG compliance using CSS and JavaScript.

Community
Advanced
eren726290eren726290
37

interactive-dashboard-builder

Generate self-contained HTML dashboards with Chart.js charts and client-side filters.

Community
Intermediate