Download the PHP package sadam/livewire-range-slider without Composer

On this page you can find all versions of the php package sadam/livewire-range-slider. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of sadam/livewire-range-slider

Informations about the package livewire-range-slider

Livewire Range Slider

Latest Version License Total Downloads

A feature-rich, customizable range slider component for Laravel Livewire applications, built on noUiSlider with Alpine.js integration.

v1.1.0 - Added Livewire 4 compatibility, updated metadata and documentation. No breaking changes.

Upgrading from v0.10? This release includes significant improvements and breaking changes. Please read the Migration Guide before updating.

Compatibility: Supports Livewire v3 and v4.

Table of Contents

Installation

Install via Composer:

Publish the assets:

⚠️ Note: The package won’t work properly without publishing these assets.

Optionally, publish the configuration file:

Requirements

What's New

This version introduces major improvements over the previous v0.10 release:

For existing users: Please see the Migration Guide below for detailed upgrade instructions.

Basic Usage

Single Value Slider

See Wire Model Modifiers for more options like wire:model.live and wire:model.blur.

Range Slider (Multiple Handles)

Available Props

Prop Type Default Description
min int/float 1 Minimum value
max int/float 100 Maximum value
step float 1 Step increment
values array null Selectable values
tooltips bool true Show value tooltips
pips bool/array false Show scale markers
theme string 'indigo' Color theme
size string 'medium' Slider size
variant string 'rounded' Handle shape
direction string 'ltr' Slider direction
behaviour string 'tap' Interaction behavior

Themes

Available themes: slate, indigo, teal, orange, cyan, emerald, sky, amber, red, rose, pink, purple

See more examples in the Examples section.

Sizes

Available sizes: small, medium, large

Variants

Available variants: square, rounded

Pips (Scale Markers)

Show evenly distributed markers:

Show markers at specific values:

Behaviour

Controls slider interaction. Common values:

See noUiSlider documentation for all options.

Values

Set specific selectable range values

Wire Model Modifiers

Live Updates

Update on every change (optimized - only fires after drag ends):

Blur Updates

Update when handle loses focus:

Deferred Updates

Update when form is submitted (default):

Examples

Price Filter with Theme

Volume Control

Age Range Selector

Configuration

Customize default values by editing config/livewire-range-slider.php:

See how to publish the configuration file in the Installation section.

Custom Styling

You can customize the published public/vendor/livewire-range-slider/range-slider.css file directly. See available theme options

Keyboard Support

The slider fully supports keyboard navigation:

Browser Support

Supports all modern browsers that support Alpine.js and noUiSlider.

Migration Guide

Upgrading from Previous Version (v0.10)

This guide will help you migrate from the previous v0.10 version to the current release.

Overview of Changes

Major Improvements:

Breaking Changes:

  1. Asset management changed - must publish assets
  2. Wire model now accepts single values or arrays (previously arrays only)
  3. Minimum PHP version is now 8.1
  4. Component props expanded from 3 to 11

Step-by-Step Migration

Step 1: Clean Up npm Installation

If you installed noUiSlider manually for the old version, remove it:

Remove the imports from resources/js/app.js:

Rebuild your assets:

Step 2: Publish Package Assets

The new version bundles noUiSlider and publishes it to your public directory:

This creates:

Step 3: Update Component Properties

For Single Value Sliders

Before:

After:

For Range Sliders

Before:

After (same, but with optional enhancements):

Step 4: Replace Custom CSS with Themes (Optional)

Before - You had to write custom CSS:

After - Use built-in themes:

Available themes: slate, indigo, teal, orange, cyan, emerald, sky, amber, red, rose, pink, purple

Step 5: Use New Features (Optional)

Add tooltips:

Add scale markers:

Choose a size:

Choose a variant:

Step 6: Publish Configuration (Optional)

Set project-wide defaults:

Edit config/livewire-range-slider.php:

Comparison Table

Feature Old Version New Version
Installation npm install + app.js config Just publish assets
Wire Model Arrays only ($values = [50]) Single value or array
Props 3 (min, max, step) 11 (see Available Props)
Themes Manual CSS required 12 built-in themes
Tooltips Manual CSS required Built-in prop
Pips Not available Built-in prop
Sizes Not available small, medium, large
Configuration Not available Config file support
PHP Version Any 8.1+

Complete Example

Before:

After:

No CSS required!

Troubleshooting

Slider Not Appearing

Make sure you published the assets:

See the Installation section for more details.

Old Styles Conflicting

If you have custom CSS from the old version, it might conflict with the new themes. Either:

  1. Remove your custom CSS and use built-in themes (see Available Props)
  2. You can customize the published public/vendor/livewire-range-slider/range-slider.css file directly. See available theme options

Wire Model Not Working

Make sure you're using the correct binding:

See Basic Usage for examples.

↑ Back to top

Credits

Built with:

License

MIT License. See LICENSE for details.

All versions of livewire-range-slider with dependencies

PHP Build Version
Package Version
Requires php Version ^8.1
illuminate/support Version ^10.0|^11.0|^12|^13
livewire/livewire Version ^3.0|^4.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package sadam/livewire-range-slider contains the following files

Loading the files please wait ...