Slider

A range slider component for Laravel applications. Supports single and range values with customizable styling. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/slider

Livewire Usage

Basic Usage

<livewire:sb-slider wire:model="value" />

With Min/Max

<livewire:sb-slider wire:model="price" :min="0" :max="1000" :step="10" />

Show Value

<livewire:sb-slider wire:model="volume" :show-value="true" />

Livewire Props

Vue 3 Usage

Setup

import { SbSlider } from './vendor/sb-slider';
app.component('SbSlider', SbSlider);

Basic Usage

<template>
  <SbSlider v-model="value" />
  <p>Value: {{ value }}</p>
</template>

<script setup>
import { ref } from 'vue';
const value = ref(50);
</script>

With Options

<template>
  <SbSlider
    v-model="price"
    :min="0"
    :max="1000"
    :step="50"
    show-value
  />
</template>

Price Filter

<template>
  <div>
    <label class="block text-sm font-medium mb-2">
      Price: ${{ price }}
    </label>
    <SbSlider
      v-model="price"
      :min="0"
      :max="500"
      :step="10"
    />
    <div class="flex justify-between text-xs text-gray-500 mt-1">
      <span>$0</span>
      <span>$500</span>
    </div>
  </div>
</template>

Volume Control

<template>
  <div class="flex items-center gap-3">
    <VolumeIcon class="w-5 h-5" />
    <SbSlider
      v-model="volume"
      :min="0"
      :max="100"
      class="flex-1"
    />
    <span class="w-8 text-sm">{{ volume }}%</span>
  </div>
</template>

Custom Colors

<template>
  <SbSlider
    v-model="value"
    track-color="bg-gray-200"
    fill-color="bg-green-500"
    thumb-color="bg-green-600"
  />
</template>

Vue Props

Events

Features

• Range Selection: Min to max values
• Step Increments: Configurable step size
• Value Display: Optional current value
• Custom Colors: Tailwind color classes
• Accessible: Keyboard support

Styling

Uses Tailwind CSS:

• Gray track background
• Blue fill and thumb
• Rounded track
• Focus ring on thumb

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License