# Slider: Slider UI

A range slider filled to 40 with a round thumb and its value shown above it. Use this video template in Subclip or copy its code for Claude.

Canonical URL: https://www.subclip.app/motion-graphics-templates/remotion/slider

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-slider.mp4?v=3fe9df38d1

A clean range slider whose fill value and thumb state can be set, with the current value shown above the thumb.

- Framework: Remotion
- Category: UI
- Duration: 4 s
- Aspect ratio: 16:9 landscape
- Code: Get the code (free sign-in): https://www.subclip.app/motion-graphics-templates/remotion/slider

A 320 pixel range slider sits on a white frame, filled to 40 percent, with a round thumb at rest and the value "40" shown above it. The template holds this state for four seconds. In the code, the fill follows a scripted value and the thumb grows and shows a ring on hover and press, so it looks like it is being dragged.

You can set the value, the thumb state (idle, hover or pressed), the track width and whether the value label shows, plus playback speed and background. Use it for a settings demo, a pricing or quantity picker, a volume or brightness control in an app video or a design system showcase.

## Use it for

- Settings demos
- Pricing and quantity pickers
- App control videos
- Design system showcases

## What you can change

- `speed`: Playback speed (Number)
- `stageBackground`: Background around the scene (Color)

## How to use this template

1. Download Subclip for Mac or Windows. Every template on this page comes pre-installed.
2. Open the Templates panel, pick Slider and drop it on your timeline.
3. Change the text, colors and timing in the layer settings, or ask the AI agent to edit it for you.
4. Export your video, or download the code to use the template in your own project.

Built on Slider from remocn: https://remocn.dev