Slider

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

sales: $50

$0 $100

<Slider
    title="sales" 
    name=sales
    defaultValue=50
    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 a specified column name to define the slider's min and max values. The slider's range will be calculated based on the column's minimum and maximum values.

data slider: 0

91 9,728

<Slider
    title='data slider'
    name='RangeSlider'
    size=large
    step=100
    data={flight_data}
    range=fare
/>

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: 10,000

0 10,000

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