Slider

Single-value horizontal range slider. [(ngModel)] is the primary value-binding mechanism (standard ControlValueAccessor, same pattern as bk-checkbox/bk-input). The value tooltip reuses the existing bkTooltip directive. Turn on marks to show a tick at every step interval; hovering one previews a small point at that exact position.

bk-sliderForms and inputsAngular

Preview

A working preview of Slider in the Brickclay style. Try it.

Volume60Step 10 with marks30Disabled

Interact with the preview to see events here.

Interactive playground

color

Examples

Custom color, color="#3B82F6"

Sets --bk-slider-color, the active track and thumb pick it up, the inactive track is unaffected.

Off-step end, `[start]`="0" `[end]`="10" `[step]`="3" `[marks]`="true"

Marks at 0, 3, 6, 9 only, end (10) isn't itself a multiple of 3 from start, so it gets no mark of its own, even though it's still a value the thumb can reach.

Custom size, `[trackHeight]`="10"

The thumb scales with the track (4× its thickness, the same ratio as the 4px/16px defaults), so resizing the slider is one number, not two that could fall out of sync, and the marks stay clear of the (now much bigger) thumb rather than disappearing behind it.

Usage

start / end / step shape the range; the current value is always clamped and snapped into it, including when they change at runtime.

API reference

Inputs <`bk-slider`>

Name	Type	Default	Description
`start`	`number`	`0`	Minimum value. Re-clamps the current value if changed at runtime.
`end`	`number`	`100`	Maximum value. Re-clamps the current value if changed at runtime.
`step`	`number`	`1`	Increment for drag/click/keyboard interaction. Decimals are supported (e.g. 0.5).
`color`	`string`	`undefined`	Sets the --bk-slider-color CSS variable, the active track and thumb. The inactive track is unaffected.
`tooltip`	`boolean`	`true`	Shows the value in a bkTooltip on hover (native bkTooltip behavior, it keeps tracking the thumb through a drag as long as the pointer stays over it).
`tooltipFormat`	`(value: number) => string`	`undefined`	Customizes the tooltip text, e.g. `(v)` => '$' + v. Defaults to the plain value.
`marks`	`boolean`	`false`	Renders a small tick at every reachable step value, start, start + step, start + 2×step, … up to end, and never at any other position; end only gets a tick when it's itself a genuine multiple of step from start. Hovering a mark's tick or label shows a small point pinned to that exact value, the thumb remains the only large, prominent circular control. Each mark has its own generously-sized `(invisible)` hit target, so clicking it jumps straight to that value; clicking anywhere else on the track still computes and snaps to the nearest valid step as usual. Ticks/labels are positioned clear of the thumb's own footprint, so they stay visible even with a larger trackHeight.
`trackHeight`	`number`	`4`	Track thickness in px. The thumb scales with it (diameter = 4× the track height, the 4px/16px default ratio) so resizing the slider is one number, not two that could fall out of sync.
`disabled`	`boolean`	`false`	Blocks pointer/keyboard interaction. Also settable via `[disabled]` on a bound FormControl.
`id`	`string`	`undefined`	Forwarded to the thumb element.
`ariaLabel`	`string`	`undefined`	Accessible name for the role="slider" thumb.

Outputs <`bk-slider`>

Name	Payload	Fires when
`valueChange`	`number`	The value is committed by a drag, a track click, or a keyboard interaction (arrows / Home / End / Page Up / Page Down), same moments `(ngModelChange)` fires.

Keyboard

Key	Action
`ArrowLeft / ArrowDown`	Decrease by step
`ArrowRight / ArrowUp`	Increase by step
`PageDown / PageUp`	Decrease / increase by step × 10
`Home`	Jump to start
`End`	Jump to end