RangeSelector
extends Component
in package
RangeSelector Laravel Blade Component
A flexible range/slider component built on top of noUiSlider library. Supports both single-value and dual-handle range selection with optional predefined options (strings or numbers). Integrates seamlessly with Livewire for reactive updates and Laravel's form validation.
Features:
- Single value or range (dual-handle) selection
- Predefined options support (string or numeric)
- Optional numeric input fields for direct value entry (when options are null)
- Automatic pips generation based on data type
- Real-time value updates via Livewire
- Form validation integration
- Customizable styling with Bulma CSS framework
- Accessibility support with proper labels and hints
CSS Customization: The component supports CSS variables for visual customization with Bulma fallbacks:
- --range-selector-handle-background (fallback: --bulma-scheme-main)
- --range-selector-handle-shadow-inner (fallback: --bulma-scheme-main)
- --range-selector-handle-shadow-border (fallback: --bulma-border)
- --range-selector-handle-shadow-outer (fallback: --bulma-shadow)
- --range-selector-connect-background (fallback: --bulma-primary)
- --range-selector-connect-border (fallback: --bulma-border)
- --range-selector-pips-color (fallback: --bulma-text)
Tags
Table of Contents
- $class : string|null
- $configJson : string
- JSON configuration for noUiSlider initialization
- $end : float|null
- $hint : string|null
- $id : string
- Unique identifier for the slider element
- $label : string|null
- $max : float
- $min : float
- $name : string
- $options : array<string|int, mixed>|null
- $optionsJson : string
- JSON array of predefined options for selection
- $pipPositions : float
- $range : bool
- $showInput : bool
- $showPips : bool
- $start : float
- $step : float
- __construct() : mixed
- Create a new RangeSelector component instance
- getSliderConfig() : string
- Generate noUiSlider configuration as JSON string
- render() : View|Closure|string
- Get the view / contents that represent the component
Properties
$class
public
string|null
$class
= null
$configJson
JSON configuration for noUiSlider initialization
public
string
$configJson
= ''
$end
public
float|null
$end
= null
$hint
public
string|null
$hint
= null
$id
Unique identifier for the slider element
public
string
$id
$label
public
string|null
$label
= null
$max
public
float
$max
= 100
$min
public
float
$min
= 0
$name
public
string
$name
$options
public
array<string|int, mixed>|null
$options
= null
$optionsJson
JSON array of predefined options for selection
public
string
$optionsJson
= '[]'
$pipPositions
public
float
$pipPositions
= 10
$range
public
bool
$range
= false
$showInput
public
bool
$showInput
= false
$showPips
public
bool
$showPips
= true
$start
public
float
$start
= 0
$step
public
float
$step
= 1
Methods
__construct()
Create a new RangeSelector component instance
public
__construct(string $name, float $min[, float $max = 100 ], float $start[, float $step = 1 ][, bool $range = false ][, bool $showPips = true ][, bool $showInput = false ][, float $pipPositions = 10 ][, array<int, string|int|float>|null $options = null ][, float|null $end = null ][, string|null $label = null ][, string|null $hint = null ][, string|null $class = null ]) : mixed
Initializes the range selector component with all necessary configuration. When options are provided, the component automatically switches to options-based mode where min/max/step are overridden to work with array indices.
Parameters
- $name : string
-
Required. The form input name and component identifier
- $min : float
-
Minimum selectable value (ignored when options provided)
- $max : float = 100
-
Maximum selectable value (ignored when options provided)
- $start : float
-
Initial selected value or start of range
- $step : float = 1
-
Step increment for value changes (ignored when options provided)
- $range : bool = false
-
Whether to enable dual-handle range selection
- $showPips : bool = true
-
Whether to display pip markers along the slider track
- $showInput : bool = false
-
Whether to show numeric input fields below the slider (only applies when options are null)
- $pipPositions : float = 10
-
Number of pip markers to display along the slider track (ignored when options provided)
- $options : array<int, string|int|float>|null = null
-
Predefined options for selection (strings or numbers)
- $end : float|null = null
-
End value for range selection (only used when range=true)
- $label : string|null = null
-
Display label (auto-generated from name if null)
- $hint : string|null = null
-
Help text shown below the slider
- $class : string|null = null
-
Additional CSS classes to apply
Tags
Return values
mixed —getSliderConfig()
Generate noUiSlider configuration as JSON string
public
getSliderConfig() : string
Creates the complete configuration object required by noUiSlider library for initialization. The configuration includes start values, connection settings, range definitions, step increments, and pip markers.
Configuration structure:
- start: Initial value(s) - array for range, single value otherwise
- connect: Whether to show connection line between handles
- range: Object with min/max boundary definitions
- step: Increment value for slider movement
- pips: Marker configuration based on pipPositions (only when no options provided)
When options are provided, pips are automatically generated for each option. When no options are provided, pips are distributed evenly based on pipPositions.
Tags
Return values
string —JSON-encoded configuration object for noUiSlider
render()
Get the view / contents that represent the component
public
render() : View|Closure|string
Returns the Blade template for rendering the range selector component. The template includes the HTML structure, styling, and JavaScript initialization for the noUiSlider.
Return values
View|Closure|string —The component view instance