Slider
Range input estilizado. Útil para volumen, comisiones, ratios… Combinable con field para label + hint.
<div class="range-block" style="max-width:380px">
<div class="range-block-head">
<span class="range-block-label">Volumen</span>
<output class="range-block-val range-value">50%</output>
</div>
<input type="range"
class="range"
name="vol"
min="0"
max="100"
step="1"
value="50"
oninput="this.parentElement.querySelector('.range-value').value = this.value + '%'">
</div>
{% from "range.jinja" import range %}
<div class="range-block" style="max-width:380px">
<div class="range-block-head">
<span class="range-block-label">Volumen</span>
<output class="range-block-val range-value">50%</output>
</div>
{{ range("vol", min=0, max=100, value=50,
attrs={"oninput": "this.parentElement.querySelector('.range-value').value = this.value + '%'"}) }}
</div>
<div class="range-block" style="max-width:380px">
<div class="range-block-head">
<span class="range-block-label">Volumen</span>
<output class="range-block-val range-value">50%</output>
</div>
<Range label="vol" min="0" max="100" value="50"
oninput="this.parentElement.querySelector('.range-value').value = this.value + '%'" />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Aplica solo a integraciones de marketplace.
<div class="field">
<label class="field-label">
Comisión por venta
</label>
<div class="field-control">
<div class="range-block">
<div class="range-block-head">
<span class="range-block-label">Porcentaje</span>
<output class="range-block-val range-value">2.5%</output>
</div>
<input type="range"
class="range"
name="commission"
min="0"
max="10"
step="0.5"
value="2.5"
oninput="this.parentElement.querySelector('.range-value').value = this.value + '%'">
</div>
</div><span class="field-hint">Aplica solo a integraciones de marketplace.</span>
</div>
{% from "range.jinja" import range %}
{% from "field.jinja" import field %}
{% call field("Comisión por venta", hint="Aplica solo a integraciones de marketplace.") %}
<div class="range-block">
<div class="range-block-head">
<span class="range-block-label">Porcentaje</span>
<output class="range-block-val range-value">2.5%</output>
</div>
{{ range("commission", min=0, max=10, step=0.5, value=2.5,
attrs={"oninput": "this.parentElement.querySelector('.range-value').value = this.value + '%'"}) }}
</div>
{% endcall %}
<Field label="Comisión por venta" hint="Aplica solo a integraciones de marketplace.">
<div class="range-block">
<div class="range-block-head">
<span class="range-block-label">Porcentaje</span>
<output class="range-block-val range-value">2.5%</output>
</div>
<Range label="commission" min="0" max="10" step="0.5" value="2.5"
oninput="this.parentElement.querySelector('.range-value').value = this.value + '%'" />
</div>
</Field>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div style="display:grid;gap:16px;max-width:380px">
<div class="showcase-variant" style="align-items:stretch">
<input type="range"
class="range"
name="a"
min="0"
max="100"
step="1"
value="30"
>
<small class="showcase-variant-caption">enabled</small>
</div>
<div class="showcase-variant" style="align-items:stretch">
<input type="range"
class="range"
name="b"
min="0"
max="100"
step="1"
value="70"
disabled>
<small class="showcase-variant-caption">disabled</small>
</div>
</div>
{% from "range.jinja" import range %}
<div style="display:grid;gap:16px;max-width:380px">
{{ range("a", value=30) }}
{{ range("b", value=70, disabled=True) }}
</div>
<div style="display:grid;gap:16px;max-width:380px">
<Range label="a" value="30" />
<Range label="b" value="70" disabled />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div data-signals="{ vol: 25 }" style="max-width:380px">
<p>Volumen: <strong data-text="$vol"></strong>%</p>
<input type="range"
class="range"
name="vol"
min="0"
max="100"
step="1"
value="25"
data-bind-vol="">
</div>
{% from "range.jinja" import range %}
<div data-signals="{ vol: 25 }" style="max-width:380px">
<p>Volumen: <strong data-text="$vol"></strong>%</p>
{{ range("vol", min=0, max=100, value=25, attrs={"data-bind-vol": ""}) }}
</div>
<div data-signals="{ vol: 25 }" style="max-width:380px">
<p>Volumen: <strong data-text="$vol"></strong>%</p>
<Range label="vol" min="0" max="100" value="25" data-bind-vol="" />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
|---|
name | str | — | Atributo name. |
min | number | 0 | Valor mínimo. |
max | number | 100 | Valor máximo. |
step | number | 1 | Incremento. |
value | number | 0 | Valor inicial. |
disabled | bool | false | Deshabilita el slider. |
attrs | dict | {} | Atributos extra. |