Skip to content

miles-crighton/svelte-range-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

Svelte Accessible Range Input

REPL Example Gif

REPL Example

A basic reference for an accessible range control that can be dropped in to your Svelte project.

No current intentions to turn this into a module, just grab copy the code and away you go. Check the REPL for an implementation example.

Features

  • onChange Event / Value binding
  • Custom Property theming
  • Tooltip
  • A11y Keyboard control / Labels

Access value

You can retrieve the value from the control through either the onChange event or binding the value to a parent variable.

onChange event listener: <Range on:change={(e) => value = e.detail.value} />

Bind value: <Range bind:value/>

Theme Custom Properties

Track

--track-focus: Outline of track when tab-focused

--track-bgcolor: Non-active background color of track

--track-highlight-bg-color: Background color of active part of track

--track-highlight-bg: Background of active part of track, can use linear-gradient()

Thumb

--thumb-bgcolor: Background color of thumb

--thumb-holding-outline: rgba(x, x, x, 0.3) value for the circular outline on the thumb when held

Tooltip

--tooltip-bgcolor: Background color of tooltip

--tooltip-bg: Background of tooltip, can use linear-gradient()

--tooltip-text: Text color for tooltip

About

Accessible Svelte Range Input with tooltip, theming and a11y controls.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages