Home Components Slider

Slider

Creates a Slider input with default min, max and step values

Sales : $18

$0 $100
<Slider
    title="Sales" 
    name=sales
    defaultValue=18
    fmt="usd0"
/>

Min and Max values can be defined, the step property and define the incremental value of the slider

Months : 0

0 36
<Slider
    title="Months" 
    name=monthsWithSteps
    min=0
    max=36
    step=12
/>

showMaxMin property can hide the Max and Min values with false, by default showMaxMin is true

Months : 0

<Slider
    title="Months" 
    name=monthsWithoutMinMax
    min=0
    max=36
    showMaxMin=false
/>

The default size of the slider can be altered with the size property using; medium, large or full

Months Medium : 4

0 36
<Slider
    title="Months Medium" 
    name=monthsMedium
    defaultValue=4
    min=0
    max=36
    size=medium
/>

Months Large : 18

0 36
<Slider
    title="Months Large" 
    name=monthsLarge
    defaultValue=18
    min=0
    max=36
    size=large
/>

Months Full : 26

0 36
<Slider
    title="Months Full" 
    name=monthsFull
    min=0
    max=36
    size=full
/>

Slider

Options

Name
Required

name of the slider, used to reference the selected value elsewhere as {inputs.name}

defaultValue

Sets the initial value of the silder

min

Sets the minimum value on the slider. Negative Values accepted.

Options:
number
Default:
0
max

Sets the maximum value on the slider. This value must be larger than the min.

Options:
number
Default:
100
step

Defines the incremental value of the slider

Options:
number
Default:
1
showMinMax

Hides or shows min and max value markers on slider.

Options:
boolean
Default:
true
size

Sets the length of the slider. Options are "medium", large" or "full". A empty string of any other strings will not result in default size.

fmt
Edit page on GitHub