Range slider component

The range slider component provides a simple and lightweight solution for sliders with two handles in your laravel application.

Imports

To use the range slider component, you need to import the corresponding assets. These assets are located in vendor/schaefersoft/laravel-ui/resources/{js,css} and include both JavaScript and CSS files.

There are two ways to import the required assets:

Option 1: Import All Assets

You can import all assets from the package, which is only required once per project, even if you use multiple components from the laravel-ui package.

Add the following lines to the corresponding files:

resources/css/app.css

[@import](https://github.com/import) "../../vendor/schaefersoft/laravel-ui/resources/css/laravel-ui.css";

resources/js/app.js

import '../../vendor/schaefersoft/laravel-ui/resources/js/laravel-ui';

Option 2: Import Only Required Assets

To reduce bundle size and improve overall performance, you can import only the assets required for the Expand component.

resources/css/app.css

[@import](https://github.com/import) "../../vendor/schaefersoft/laravel-ui/resources/css/modules/range-slider.css";

resources/js/app.js

import '../../vendor/schaefersoft/laravel-ui/resources/js/modules/range-slider';

Usage

To use the range slider component, follow these steps.

Basic Structure

<x-ui::expand>
    <x-ui::range-slider lower-name=""
                        upper-name=""/>
</x-ui::expand>

Example

<x-ui::range-slider lower-name="height-lower"
                    upper-name="height-upper"
                    :lower-value="old('height-lower', 10)"
                    :upper-value="old('height-upper', 90)"/>

Attributes