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

The minimal value is fixed. If true, only one slider for max value is used

data-show-steps
false Boolean

If true, displays ticks in the slider

show-labels
false Boolean

If true, displays value labels above the sliders

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 shows ticks for each step. Below are examples of ticks with different 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.

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>
Litewind-alpine 0.1.0
Components Documentation