Slider

{% load wdj %}
<div class="w-72 max-w-full">
  {% include "wdj/components/slider.html" with name="price" label="Price range" range=True start_value=25 end_value=75 only %}
</div>

{% load wdj %}
<div class="w-72 max-w-full">
{% include "wdj/components/slider.html" with name="slider_basic" label="Volume" value=40 only %}
</div>

{% load wdj %}
<div class="w-72 max-w-full">
{% include "wdj/components/slider.html" with name="slider_steps" label="Match count" value=2 max=5 only %}
</div>

{% load wdj %}
<div class="w-72 max-w-full">
{% include "wdj/components/slider.html" with name="slider_disabled" label="Locked" value=70 disabled=True only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/slider.html" with name="slider_minimum_value" label="Minimum volume" value=0 only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/slider.html" with name="slider_custom_bounds" label="Temperature" min=-10 max=40 value=20 value_suffix=" C" only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/slider.html" with name="slider_hidden_value" label="Opacity" value=70 show_value=False only %}
</div>

{% load wdj %}
<div class="w-72 max-w-full">{% include "wdj/components/slider.html" with id="audit-percent-slider" label="Sampling rate" value=0.25 min=0 max=1 step=0.05 format="percent" only %}</div>

{% load wdj %}
<div class="flex w-72 max-w-full flex-col gap-6">{% include "wdj/components/slider.html" with id="audit-small-slider" label="Small" value=30 size="sm" only %}{% include "wdj/components/slider.html" with id="audit-base-slider" label="Base" value=30 only %}</div>

{% load wdj %}
<div class="w-72 max-w-full" x-data="{ brightness: 50 }" @wdj:slider-change="brightness = $event.detail.value">{% include "wdj/components/slider.html" with id="audit-brightness" label="Brightness" value=50 only %}<p class="mt-2 text-base" x-text="'Brightness: ' + brightness + '%'"></p></div>