WinSlider

A classic Win2k range slider with optional label and value readout. Custom-styled track with navy gradient fill.

When to use

Use WinSlider for adjustable values on a continuum — volume, brightness, speed, or any numeric setting with a range.

When not to use

Do not use WinSlider for discrete, exact values. Use WinInput type="number" instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinSlider } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Default (0)

At 50%

At 100%

100

With min/max/label

Volume50

Disabled

Locked setting50

Props

All available props for the WinSlider component.

Prop	Type	Default	Description
`label`	`string`	`—`	Optional label text above the slider.
`value`	`number`	`—`	Current slider value.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`disabled`	`boolean`	`false`	Disables the slider.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinSlider } from 'win2k-ui'

export function Example() {
  const [val, setVal] = useState(50)
  return (
    <WinSlider
      value={val}
      onChange={(e) => setVal(Number(e.target.value))}
      label="Brightness"
    />
  )
}

Notes

WinSlider overlays a transparent native range input on top of a custom-styled track with a navy gradient fill. The native input provides accessibility and keyboard support. The value readout displays to the right of the label.