Range slider Field

Min. 100 ks

Skladem

        {% include "@Components/fields/range-slider-field/range-slider-field.twig" with {props: {
  availability: 2000,
  min: 100,
  max: 10000,
  unit: "ks"
}} %}

          <div class="f-range-slider d-flex align-items-center w-100 u-posr" data-min="100" data-max="10000" data-availability="2000">
  <div class="f-range-slider__measure u-posr flex-grow-1 h-100 u-z-index-10 u-fz-xs u-fw-500">
    <input class="f-range-slider__range u-posa u-top-50-p u-left-0 u-translate-middle-y w-100" type="range" min="0" max="1000" value="0">
    <div class="f-range-slider__min-visualiser u-posa u-left-0 u-top-50-p u-translate-middle d-flex align-items-end h-100 u-z-index-negative">
      Min. 100 ks
    </div>
    <div class="f-range-slider__availability-visualiser u-posa u-top-50-p u-translate-middle d-flex align-items-start h-100 u-z-index-negative">
      Skladem
    </div>
  </div>
</div>

Min. 1000 ks

Skladem

        {% include "@Components/fields/range-slider-field/range-slider-field.twig" with {props: {
  availability: 4000,
  min: 1000,
  max: 5000,
  unit: "ks"
}} %}

          <div class="f-range-slider d-flex align-items-center w-100 u-posr" data-min="1000" data-max="5000" data-availability="4000">
  <div class="f-range-slider__measure u-posr flex-grow-1 h-100 u-z-index-10 u-fz-xs u-fw-500">
    <input class="f-range-slider__range u-posa u-top-50-p u-left-0 u-translate-middle-y w-100" type="range" min="0" max="1000" value="0">
    <div class="f-range-slider__min-visualiser u-posa u-left-0 u-top-50-p u-translate-middle d-flex align-items-end h-100 u-z-index-negative">
      Min. 1000 ks
    </div>
    <div class="f-range-slider__availability-visualiser u-posa u-top-50-p u-translate-middle d-flex align-items-start h-100 u-z-index-negative">
      Skladem
    </div>
  </div>
</div>