{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A range slider allows users to choose an approximate value from a range by dragging a handle along a track.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-range_slider
  id="range-default"
  name="satisfaction"
  label="Overall satisfaction"
  hint="Rate from 0 to 100"
  min="0"
  max="100"
  value="50"
/>

<h2 class="font-heading-xl margin-top-4">With step</h2>
<c-range_slider
  id="range-step"
  name="income_range"
  label="Estimated annual income"
  hint="Select in increments of $10,000"
  min="0"
  max="200000"
  step="10000"
  value="50000"
/>

<h2 class="font-heading-xl margin-top-4">Required</h2>
<c-range_slider
  id="range-required"
  name="priority"
  label="Project priority level"
  hint="1 is lowest, 10 is highest"
  min="1"
  max="10"
  value="5"
  required="required"
/>

<h2 class="font-heading-xl margin-top-4">Error state</h2>
<c-range_slider
  id="range-error"
  name="hours"
  label="Weekly hours worked"
  hint="Select between 0 and 80 hours"
  error="Select a value for weekly hours"
  min="0"
  max="80"
  value="0"
/>

<h2 class="font-heading-xl margin-top-4">Disabled</h2>
<c-range_slider
  id="range-disabled"
  name="completion"
  label="Project completion"
  hint="This value is calculated automatically"
  min="0"
  max="100"
  value="75"
  disabled="disabled"
/>
{% endblock %}