Range

View component on Github This page on Github
Example 

<div
  x-data="range"
  class="relative flex h-5 w-full items-center"
>
  <div
    class="flex h-2 w-full items-center overflow-hidden rounded-full bg-secondary-300 dark:bg-dark-700"
  >
    <div
      class="relative h-full bg-gray-500 dark:bg-gray-300"
      x-bind="trackFill"
    ></div>
    <template x-if="_showSteps">
      <template x-for="(s, index) in getSteps">
        <div
          class="absolute h-1 w-1 rounded-full"
          class-filled="bg-gray-100 dark:bg-gray-600"
          class-default="bg-gray-600 dark:bg-gray-400"
          x-bind="step"
        ></div>
      </template>
    </template>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMin"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMin"
      x-cloak
    ></div>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMax"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMax"
      x-cloak
    ></div>
  </div>
</div>

Usage

<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/range/dist/cdn.min.js"></script>

The data for the component is provided by the range function in the x-data directive and the props in the data-* attributes.

Props

data-min
0 Number

Minimal slider value

data-max
100 Number

Maximal slider value

data-step
1 Number

Sets the interval of the slider value

data-fixed-min
false Boolean

If true, the minimal value will be fixed and only the slider for maximal value will be used

data-show-steps
false Boolean

If true, step ticks are displayed

data-show-labels
false Boolean String

If set to true or 'always' the value labels are displayed above the sliders. You can also set this prop to 'focus' to display the labels when the slider is focused.

x-model

x-model
[] Array

The x-model is an array containing minimal and maximal slider values.

Fixed minimal value

The data-fixed-min makes the minimal value fixed.

Example 

<div
  x-data="range"
  data-fixed-min
  class="relative flex h-5 w-full items-center"
>
  <div
    class="flex h-2 w-full items-center overflow-hidden rounded-full bg-secondary-300 dark:bg-dark-700"
  >
    <div
      class="relative h-full bg-gray-500 dark:bg-gray-300"
      x-bind="trackFill"
    ></div>
    <template x-if="_showSteps">
      <template x-for="(s, index) in getSteps">
        <div
          class="absolute h-1 w-1 rounded-full"
          class-filled="bg-gray-100 dark:bg-gray-600"
          class-default="bg-gray-600 dark:bg-gray-400"
          x-bind="step"
        ></div>
      </template>
    </template>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMin"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMin"
      x-cloak
    ></div>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMax"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMax"
      x-cloak
    ></div>
  </div>
</div>

Min, max and step

The data-min, data-max and data-step define minimal, maximal, and step values of the slider.

Example 

<div
  x-data="range"
  data-min="-100"
  data-max="100"
  data-step="10"
  class="relative flex h-5 w-full items-center"
>
  <div
    class="flex h-2 w-full items-center overflow-hidden rounded-full bg-secondary-300 dark:bg-dark-700"
  >
    <div
      class="relative h-full bg-gray-500 dark:bg-gray-300"
      x-bind="trackFill"
    ></div>
    <template x-if="_showSteps">
      <template x-for="(s, index) in getSteps">
        <div
          class="absolute h-1 w-1 rounded-full"
          class-filled="bg-gray-100 dark:bg-gray-600"
          class-default="bg-gray-600 dark:bg-gray-400"
          x-bind="step"
        ></div>
      </template>
    </template>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMin"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMin"
      x-cloak
    ></div>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMax"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMax"
      x-cloak
    ></div>
  </div>
</div>

Step ticks

The data-show-steps displays a tick for each step. Below are examples showing different tick styles.

Example 

<div
  x-data="range"
  data-step='10'
  data-show-steps
  class="relative flex h-5 w-full items-center"
>
  <div
    class="flex h-2 w-full items-center overflow-hidden rounded-full bg-secondary-300 dark:bg-dark-700"
  >
    <div
      class="relative h-full bg-gray-500 dark:bg-gray-300"
      x-bind="trackFill"
    ></div>
    <template x-if="_showSteps">
      <template x-for="(s, index) in getSteps">
        <div
          class="absolute h-1 w-1 rounded-full"
          class-filled="bg-gray-100 dark:bg-gray-600"
          class-default="bg-gray-600 dark:bg-gray-400"
          x-bind="step"
        ></div>
      </template>
    </template>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMin"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMin"
      x-cloak
    ></div>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMax"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMax"
      x-cloak
    ></div>
  </div>
</div>
Example 

<div
  x-data="range"
  data-step="10"
  data-show-steps
  class="relative flex h-5 w-full items-center"
>
  <div
    class="flex h-2 w-full items-center overflow-hidden rounded-full bg-secondary-300 dark:bg-dark-700"
  >
    <div
      class="relative h-full bg-gray-500 dark:bg-gray-300"
      x-bind="trackFill"
    ></div>
    <template x-if="_showSteps">
      <template x-for="(s, index) in getSteps">
        <div
          class="absolute h-2 w-px top-3.5 rounded-full"
          class-filled="bg-gray-600 dark:bg-gray-400"
          class-default="bg-gray-600 dark:bg-gray-400"
          x-bind="step"
        ></div>
      </template>
    </template>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMin"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMin"
      x-cloak
    ></div>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMax"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMax"
      x-cloak
    ></div>
  </div>
</div>

Slider labels

The data-show-labels displays value labels for each slider. To show labels when the component is focused, set data-show-labels to "focus".

Example 

<div
  x-data="range"
  data-step="10"
  data-show-steps
  data-show-labels
  class="relative flex h-5 w-full items-center mt-10"
>
  <div
    class="flex h-2 w-full items-center overflow-hidden rounded-full bg-secondary-300 dark:bg-dark-700"
  >
    <div
      class="relative h-full bg-gray-500 dark:bg-gray-300"
      x-bind="trackFill"
    ></div>
    <template x-if="_showSteps">
      <template x-for="(s, index) in getSteps">
        <div
          class="absolute h-1 w-1 rounded-full"
          class-filled="bg-gray-100 dark:bg-gray-600"
          class-default="bg-gray-600 dark:bg-gray-400"
          x-bind="step"
        ></div>
      </template>
    </template>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMin"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMin"
      x-cloak
    ></div>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMax"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMax"
      x-cloak
    ></div>
  </div>
</div>
<div
  x-data="range"
  data-step="10"
  data-show-steps
  data-show-labels="focus"
  class="relative flex h-5 w-full items-center mt-10"
>
  <div
    class="flex h-2 w-full items-center overflow-hidden rounded-full bg-secondary-300 dark:bg-dark-700"
  >
    <div
      class="relative h-full bg-gray-500 dark:bg-gray-300"
      x-bind="trackFill"
    ></div>
    <template x-if="_showSteps">
      <template x-for="(s, index) in getSteps">
        <div
          class="absolute h-1 w-1 rounded-full"
          class-filled="bg-gray-100 dark:bg-gray-600"
          class-default="bg-gray-600 dark:bg-gray-400"
          x-bind="step"
        ></div>
      </template>
    </template>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMin"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMin"
      x-cloak
    ></div>
  </div>
  <div
    class="absolute h-5 w-5 rounded-full bg-gray-500 shadow-md ring-primary-400/50 outline-hidden focus:ring-4 dark:bg-gray-300"
    x-bind="sliderMax"
    tabindex="0"
  >
    <div
      class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-gray-500 px-2 py-0.5 text-sm text-white"
      x-bind="labelMax"
      x-cloak
    ></div>
  </div>
</div>
Litewind-alpine 0.1.35
Components Documentation