Slider

A range input, styled, with its filled track.

Alpine.js1 file

Installation

pyblade-ui add slider

Install the dependencies
Alpine.js, loaded in your <head>.

Copy this file into your project

components/ui/slider.html

<input type="range" data-slot="slider" {{ attributes.cn(
    "h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary outline-none disabled:cursor-not-allowed disabled:opacity-50",
    "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-[box-shadow]",
    "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background [&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-primary",
    "focus-visible:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-ring/50",
) }} x-data x-init="const paint = () => $el.style.background = `linear-gradient(to right, var(--primary) ${($el.value - ($el.min || 0)) / (($el.max || 100) - ($el.min || 0)) * 100}%, var(--muted) 0)`; paint(); $el.addEventListener('input', paint)" />

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.slider> is available in all your templates.

<pb-ui.slider name="volume" min="0" max="100" value="50" />

Examples

With the value shown

<div class="grid w-3/5 gap-3" x-data="{ v: 25 }">
  <div class="flex justify-between text-sm"><span class="font-medium">Temperature</span><span class="text-muted-foreground" x-text="v / 100"></span></div>
  <pb-ui.slider min="0" max="100" value="25" step="1" x-model="v" />
</div>

‹ Switch Input OTP ›