TALL kit

The slider component allows users to visually select range values by dragging a handle along a track, providing a seamless and intuitive experience for value selection.

<x-slider x-data>
    <x-slider.thumb value="50"/>
</x-slider>

Installation

Make sure to include the required Alpine and TALL kit plugins to enable the range slider functionality.

import {
    slider,
} from "@tall-kit/plugins"
import focus from '@alpinejs/focus'

Alpine.plugin(focus)
Alpine.plugin(slider)

Usage

Range slider with two values

<div x-data="{min: 10, max: 60}">
    <x-slider>
        <x-slider.thumb x-model="min"/>
        <x-slider.thumb x-model="max"/>
    </x-slider>
    <span x-text="[min, max].join(' - ')"></span>
</div>

Slider with Livewire model update

Rating: 5

<div>
    <x-slider x-data
              step="0.25"
              min="1"
              max="10"
    >
        <x-slider.thumb
            :value="$rating"
            x-on:change="$wire.rating = $thumb.value"
        />
    </x-slider>

    <x-loader wire:loading/>
    Rating: {{$rating}}
</div>