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
/>

Specifying Dynamic Columns

Supply data with specified column names for minColumn, maxColumn, and/or defaultValue. The first row’s value in each of these columns will determine the minimum, maximum, or default value, respectively.

data slider : 10000

0 10000
<Slider
    title='data slider'
    size=large
    step=100
    data={flight_data}
    maxColumn=max_fare
    defaultValue=max_fare
/>

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
data
Query name, wrapped in curly braces
Options:
query name
maxColumn
Takes the first value of a column and assigns it to the max value
Options:
string - column name
minColumn
Takes the first value of a column and assigns it to the min value
Options:
string - column name
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