# Slider: Interface de controle deslizante

Um controle deslizante preenchido até 40, com um botão redondo e o valor mostrado acima dele. Template de vídeo: copie o código para Claude ou edite no Subclip.

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

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

Um controle deslizante limpo cujo valor de preenchimento e estado do botão podem ser definidos, com o valor atual mostrado acima do botão.

- Framework: Remotion
- Categoria: Interface
- Duração: 4 s
- Proporção: 16:9 horizontal
- Código: Pegue o código (login grátis): https://www.subclip.app/pt/motion-graphics-templates/remotion/slider

Um controle deslizante de 320 pixels fica sobre um fundo branco, preenchido até 40 por cento, com um botão redondo em repouso e o valor "40" acima dele. O template mantém esse estado por quatro segundos. No código, o preenchimento segue um valor programado e o botão cresce e mostra um anel no hover e no clique, para parecer que está sendo arrastado.

Você pode definir o valor, o estado do botão (repouso, hover ou pressionado), a largura da trilha e se o rótulo do valor aparece, além da velocidade de reprodução e do fundo. Use em uma demo de configurações, um seletor de preço ou quantidade, um controle de volume ou brilho em um vídeo de app ou a apresentação de um design system.

## Use para

- Demos de configurações
- Seletores de preço e quantidade
- Vídeos de controles de apps
- Apresentações de design systems

## O que você pode alterar

- `speed`: Velocidade de reprodução (Número)
- `stageBackground`: Fundo ao redor da cena (Cor)

## Como usar este template

1. Baixe o Subclip para Mac ou Windows. Todos os templates desta página já vêm instalados.
2. Abra o painel Templates, escolha Slider e arraste para a sua timeline.
3. Altere o texto, as cores e o tempo nas configurações da camada, ou peça ao agente de IA para editar por você.
4. Exporte o vídeo ou baixe o código para usar o template no seu próprio projeto.

Baseado em Slider do remocn: https://remocn.dev