Slider

Select values from a slider. This provides a convenient way for users to select numeric values instead of clicking increment and decrement arrows or manually entering values.

        
            <x-bladewind::slider />
        
    

Different Colours

The Slider component like most BladewindUI components supports multiple colours. The default colour is your project's primary colour defined in your TailwindCss config file. To use a different colour, set the color attribute. The example below also sets the selected attribute. This is useful in edit mode to specify the slider number the user already selected. This can also be used to set the default value for the slider.

        
            <x-bladewind::slider selected="50" color="cyan" />
        
    

        
            <x-bladewind::slider selected="30" color="pink" />
        
    

        
            <x-bladewind::slider selected="70" color="indigo" />
        
    

The full list of colours is available in the attributes list below.

Step

By default the slider increments by 1 when you slide. You can define the numeric interval between slides by setting the step attribute. This must be a positive number greater than 1.

        
            <x-bladewind::slider selected="10" step="5" />
        
    

Min and Max Values

By default the slider is set to a minimum of 0 and maximum of 100. This means you cannot slide beyond 0 or past 100. This behaviour can be changed by setting the min and min attributes. These must be positive numbers. This is useful for example in a case where you are building a web app for youth and need to ensure they only select ages between 18 and 35.

        
            <x-bladewind::slider min="18" max="35" />
        
    

Range Selection

There are cases where you need to let users select a minimum and maximum value. For example, a video streaming app may want to restrict content for kids between a range say 4 to 9. Setting the slider attribute range="true" displays two markers on the slider for users to select two values.

<x-bladewind::slider range="true" selected="20" max_selected="60" />

Form Submission

The assumption is you will need to retrieve the value from the slider and do something with it. The name you specify for the slider is what will be passed when your form is submitted. Assuming we named our slider age, below is the HTML input field that will be generated.

<input type="hidden"
       name="age"
       id="age"
       class="slider-selection-age-input bw-slider-age"
       value="50" />

<!-- when using a range slider and two values are selected -->
<input type="hidden"
       name="age"
       id="age"
       class="slider-selection-age-input bw-slider-age"
       value="10,50" />

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Slider component.

Slider with all attributes defined

<x-bladewind::slider
    min="5"
    max="50"
    color="red"
    show_values="false"
    step="5"
    range="true"
    selected="34"
    max_selected="45"
    class="m-0" />