Docs›Componentes (Admin)›mad-range-field
Componentes (Admin)

mad-range-field

Slider numérico.

Slider numérico (HTML5 <input type="range">) com display do valor atual no canto superior direito e marcadores min/max abaixo.

Props

Prop Tipo Default Descrição
name string '' Nome do campo (obrigatório)
label string '' Label do campo
value number 50 Valor inicial. O valor do registro ($form->fill()) tem prioridade sobre a prop — regra de \Mad\Support\MadFieldValue
min number 0 Valor mínimo
max number 100 Valor máximo
step number 1 Incremento
suffix string '' Sufixo exibido (ex: %, px, kg)
width / max-width string '' Largura / largura máxima do campo (CSS: px, %, calc())
hint string '' Texto de ajuda
error string '' Mensagem de erro
disabled bool false Campo desabilitado
attrs string '' Atributos HTML extras

Não existe prop id — o id do <input> é sempre gerado internamente (mad_{name}_{random}). Para vincular um <label for> externo ou estilizar via seletor, use attrs para colar um id manual.

Uso básico

<mad-range-field name="volume" label="Volume" />

Com min/max/step e sufixo

<mad-range-field name="desconto" label="Desconto"
    :min="0" :max="100" :step="5" suffix="%" :value="10" />

Slider de preço

<mad-range-field name="preco_max" label="Preço máximo"
    :min="0" :max="5000" :step="50" suffix=" R$" :value="1000" />

Slider de peso

<mad-range-field name="peso" label="Peso"
    :min="0" :max="200" :step="0.1" suffix=" kg" :value="70" />

Dentro de formulário

<mad-form submit="onSave">
    <mad-range-field name="qualidade" label="Qualidade JPEG"
        :min="1" :max="100" :step="1" suffix="%" :value="85" />
    <mad-range-field name="largura_max" label="Largura máxima"
        :min="100" :max="4000" :step="100" suffix="px" :value="1920" />
    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

Reativo via mad:model.live

O range injeta mad:model.live="<name>" só quando attrs não traz mad:model nem data-mad-model — declarar o seu próprio bind desliga a injeção automática. Com o default, o valor é propagado ao backend a cada mudança, útil para auto-bind:

<mad-range-field name="desconto" label="Desconto" :min="0" :max="50" suffix="%" />

// Toda alteração no slider chama onUpdated via auto-bind se houver dependências
public function onUpdated(string $name): void
{
    if ($name === 'desconto') {
        $this->form->set('valor_final', $this->valor * (1 - $this->desconto / 100));
    }
}

NUNCA fazer

{{-- ERRADO: input range nativo sem visual customizado --}}
<input type="range" min="0" max="100" name="volume">

{{-- CERTO --}}
<mad-range-field name="volume" label="Volume" :min="0" :max="100" />

{{-- ERRADO: passar min/max como string sem : --}}
<mad-range-field name="vol" min="0" max="100" />
{{-- Blade trata atributo sem `:` como string literal — usar bind PHP --}}

{{-- CERTO: usar : para passar como número --}}
<mad-range-field name="vol" :min="0" :max="100" />

{{-- ERRADO: usar mad-numeric-field para slider --}}
<mad-numeric-field name="desconto" label="Desconto" />

{{-- CERTO: range para seleção visual em escala --}}
<mad-range-field name="desconto" label="Desconto" :min="0" :max="100" suffix="%" />

{{-- ERRADO: esperar que :id="..." defina o id do input --}}
<mad-range-field name="vol" :id="'slider-volume'" />

{{-- CERTO: id nao existe como prop — use attrs se precisar de um id fixo --}}
<mad-range-field name="vol" attrs="id=slider-volume" />