# Liquid glass slider: spec and references

Source: https://meniscus.site/components/slider · Updated 2026-09-27

Continuous value. Layer: controls.

Also called: volume.

| Property | Value |
|---|---|
| Material | track: flat glass groove · fill: solid accent · thumb: white capsule, clear lens while dragged |
| Profile | convex thumb |
| Geometry | track 6–8 tall, radius 4; thumb capsule 36×22 (iOS 26 style) or circle 22–28 — keep the thumb ≥ 3× the track height |
| Bezel (px) | thumb h/2 |
| Displacement (px) | 0.4 × thumb h/2 at rest, up to 0.5 while dragged |
| Blur (px) | 0 |

## Anatomy

- label + value row
- track
- accent fill
- thumb

## States

- rest
- drag: thumb grows 1.2–1.4× and becomes clear glass magnifying the track
- disabled

## Rules

- Drag must change thickness/size, not only colour.
- Value label above right, secondary text colour.

## References

![Two labelled sliders in a glass panel, with resting and held lens thumbs over a procedural backdrop.](https://meniscus.site/gallery/slider-light-studio.webp)

![Two labelled sliders in a glass panel, one with a resting solid thumb and one with a larger held lens thumb, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/slider-dark-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_component_spec` tool returns for `slider`. Materials, colours, light and composition rules that apply to every component are in the [liquid glass guide](https://meniscus.site/liquid-glass). Connect: `claude mcp add --transport http meniscus https://meniscus.site/mcp` — setup for every client: https://meniscus.site/docs