BuscarCtrl K

Appearance

Extensões

Guia de Uso - Slider / Range ​

Status: Implementado (Design System 1.1 • 05/11/2025) – disponível em versões simples, duplas e com steps.

📋 Índice ​

  1. Introdução
  2. Estrutura Base
  3. Tamanhos
  4. Estados
  5. Variantes
  6. Steps
  7. Dark Mode
  8. Exemplos Práticos

Introdução ​

O componente Slider / Range permite selecionar um valor dentro de um intervalo. É ideal para:

  • Ajustes de volume/brightness
  • Filtros e configurações
  • Seleção de valores numéricos
  • Qualquer controle contínuo

Quando Usar Slider ​

✅ Use slider quando:

  • Você precisa selecionar um valor em um intervalo
  • O valor é numérico
  • Quer controle visual intuitivo
  • O intervalo é conhecido (min/max)

❌ Evite usar slider quando:

  • Você tem poucas opções (<5) - use select
  • Precisa de precisão exata - use input number
  • O intervalo é muito grande sem steps

Estrutura Base ​

HTML Básico ​

html
<div class="slider">
    <input type="range" class="slider-input" min="0" max="100" value="50">
</div>

Com Labels ​

html
<div class="slider">
    <div class="slider-labels">
        <span class="slider-min">0</span>
        <span class="slider-label">Volume</span>
        <span class="slider-value">50</span>
        <span class="slider-max">100</span>
    </div>
    <input type="range" class="slider-input" min="0" max="100" value="50">
</div>

Tamanhos ​

Small ​

html
<div class="slider slider--sm">
    <input type="range" class="slider-input" min="0" max="100" value="50">
</div>

Medium (Padrão) ​

html
<div class="slider">
    <input type="range" class="slider-input" min="0" max="100" value="50">
</div>

Large ​

html
<div class="slider slider--lg">
    <input type="range" class="slider-input" min="0" max="100" value="50">
</div>

Estados ​

Default ​

html
<div class="slider">
    <input type="range" class="slider-input" min="0" max="100" value="50">
</div>

Disabled ​

html
<div class="slider">
    <input type="range" class="slider-input" min="0" max="100" value="50" disabled>
</div>

Variantes ​

Default ​

html
<div class="slider">
    <input type="range" class="slider-input" min="0" max="100" value="50">
</div>

Success ​

html
<div class="slider slider--success">
    <input type="range" class="slider-input" min="0" max="100" value="75">
</div>

Warning ​

html
<div class="slider slider--warning">
    <input type="range" class="slider-input" min="0" max="100" value="60">
</div>

Error ​

html
<div class="slider slider--error">
    <input type="range" class="slider-input" min="0" max="100" value="30">
</div>

Steps ​

Com Steps ​

html
<div class="slider">
    <input type="range" class="slider-input" min="0" max="100" value="50" step="10">
</div>

Nota: O step define o incremento. Exemplo: step="10" permite valores 0, 10, 20, 30...

Dark Mode ​

O Dark Mode é aplicado automaticamente quando a classe .dark, .dark-mode ou [data-theme="dark"] está presente no elemento raiz.

html
<html class="dark">
    <!-- Slider automaticamente em dark mode -->
</html>

Exemplos Práticos ​

Exemplo 1: Controle de Volume ​

html
<div class="slider">
    <div class="slider-labels">
        <span class="slider-min">0</span>
        <span class="slider-label">Volume</span>
        <span class="slider-value" id="volume-value">50</span>
        <span class="slider-max">100</span>
    </div>
    <input type="range" class="slider-input" id="volume" min="0" max="100" value="50">
</div>
javascript
const volumeSlider = document.getElementById('volume');
const volumeValue = document.getElementById('volume-value');

volumeSlider.addEventListener('input', function() {
    volumeValue.textContent = this.value;
    // Aplicar volume
    setVolume(this.value);
});

Exemplo 2: Filtro de Preço ​

html
<div class="slider">
    <div class="slider-labels">
        <span class="slider-min">R$ 0</span>
        <span class="slider-label">Preço máximo</span>
        <span class="slider-value" id="price-value">R$ 500</span>
        <span class="slider-max">R$ 1000</span>
    </div>
    <input type="range" class="slider-input" id="price" min="0" max="1000" value="500" step="50">
</div>
javascript
const priceSlider = document.getElementById('price');
const priceValue = document.getElementById('price-value');

priceSlider.addEventListener('input', function() {
    priceValue.textContent = 'R$ ' + this.value;
    // Filtrar produtos
    filterProducts(this.value);
});

Exemplo 3: Controle de Brightness ​

html
<div class="slider slider--success">
    <div class="slider-labels">
        <span class="slider-min">0%</span>
        <span class="slider-label">Brilho</span>
        <span class="slider-value" id="brightness-value">75%</span>
        <span class="slider-max">100%</span>
    </div>
    <input type="range" class="slider-input" id="brightness" min="0" max="100" value="75">
</div>

Boas Práticas ​

  1. Use labels descritivos: Seja claro sobre o que o slider controla
  2. Mostre valor atual: Exiba o valor selecionado
  3. Use steps quando apropriado: Para valores discretos
  4. Considere min/max: Sempre defina limites claros
  5. Feedback visual: Atualize valor em tempo real

Versão: 1.0.0
Data: 2025-01-27
Documentação: /public/css/design-system/GUIA_SLIDER.md
Exemplos: /public/css/design-system/exemplos-slider.html

Design System interno do GALES

IpeWeb