Slider

The Slider component allows users to select a value or range of values by moving a handle along a track. Supports single values, ranges, vertical layouts, and rich customization hooks for the value-label tooltip.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁹⁾

Properties

⁽⁸⁸⁾

Playground

Basic Usage

Basic slider usage for selecting numeric values within a range.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Slider
,
 
Text
,
 
Card
,
 
Block
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 
useState
(
25
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<Slider
        
value
=
{
value
}
        
onChange
=
{
setValue
}
        
min
=
{
0
}
        
max
=
{
100
}
      
/>
    
</Block
>
  
)
;
}

Slider variants

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Slider
,
 
Text
,
 
Block
,
 
Card
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
VARIANTS
 
=
 
[
'default'
,
 
'filled'
,
 
'outline'
,
 
'minimal'
,
 
'segmented'
,
 
'unstyled'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 
useState
(
40
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
 
      
{
VARIANTS
.
map
(
(
variant
)
 
=>
 
(
        
<Slider
          
key
=
{
variant
}
          
label
=
{
variant
}
          
variant
=
{
variant
}
          
value
=
{
value
}
          
onChange
=
{
setValue
}
          
min
=
{
0
}
          
max
=
{
100
}
          
step
=
{
5
}
          
showTicks
=
{
variant 
===
 
'segmented'
}
          
restrictToTicks
=
{
variant 
===
 
'segmented'
}
          fullWidth
        
/>
      
)
)
}
    
</Block
>
  
)
;
}

Ticks and Marks

Slider with visible tick marks and labeled values for better precision.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Slider
,
 
Block
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 
useState
(
50
)
;
 
  
return
 
(
    
<Block
 
w
=
{
400
}
>
      
<Slider
        
value
=
{
value
}
        
onChange
=
{
setValue
}
        
min
=
{
0
}
        
max
=
{
100
}
        showTicks
        restrictToTicks
        
ticks
=
{
[
          
{
 value
:
 
0
,
 label
:
 
'Min'
 
}
,
          
{
 value
:
 
25
 
}
,
          
{
 value
:
 
50
,
 label
:
 
'Mid'
 
}
,
          
{
 value
:
 
75
 
}
,
          
{
 value
:
 
100
,
 label
:
 
'Max'
 
}
,
        
]
}
 
      
/>
    
</Block
>
  
)
;
}

Range Slider

Range slider for selecting a range of values with two handles on a single track. Perfect for filtering, price ranges, and any scenario where you need to select minimum and maximum values.

Features demonstrated:

•

Basic range selection with two thumbs

•

Custom value formatting and labels

•

Tick marks and step increments

•

Minimum range constraints

•

Real-time range span calculation

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
RangeSlider
,
 
Text
,
 
Block
,
 
Card
,
 
Flex
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
priceRange
,
 setPriceRange
]
 
=
 useState
<
[
number
,
 
number
]
>
(
[
25
,
 
75
]
)
;
  
const
 
[
temperatureRange
,
 setTemperatureRange
]
 
=
 useState
<
[
number
,
 
number
]
>
(
[
18
,
 
24
]
)
;
  
const
 
[
scoreRange
,
 setScoreRange
]
 
=
 useState
<
[
number
,
 
number
]
>
(
[
60
,
 
90
]
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
       
<Card
>
        
<Block
>
          
<Text
 
size
=
"lg"
 
weight
=
"semibold"
>
Price
 
Range
</Text
>
          
<Block
>
            
<Flex
 
justify
=
"space-between"
>
              
<Text
 
size
=
"sm"
>
Min
:
 $
{
priceRange
[
0
]
}
</Text
>
              
<Text
 
size
=
"sm"
>
Max
:
 $
{
priceRange
[
1
]
}
</Text
>
            
</Flex
>
            
<RangeSlider
              
value
=
{
priceRange
}
              
onChange
=
{
setPriceRange
}
              
min
=
{
0
}
              
max
=
{
100
}
              
step
=
{
5
}
              
label
=
"Price Filter ($)"
              showTicks
            
/>
            
<Text
 
size
=
"sm"
 
style
=
{
{
 color
:
 
'#666'
 
}
}
>
              
Budget
 range
:
 $
{
priceRange
[
1
]
 
-
 priceRange
[
0
]
}
            
</Text
>
          
</Block
>
        
</Block
>
        
</Card
>
 
      
<Card
>
        
<Block
>
          
<Text
 
size
=
"lg"
 
weight
=
"semibold"
>
Temperature
 
Range
</Text
>
          
<Block
>
            
<RangeSlider
              
value
=
{
temperatureRange
}
              
onChange
=
{
setTemperatureRange
}
              
min
=
{
10
}
              
max
=
{
30
}
              
step
=
{
0.5
}
              
label
=
"Comfortable Temperature (°C)"
              
valueLabel
=
{
(
value
)
 
=>
 
`${value}°C`
}
              valueLabelAlwaysOn
            
/>
            
<Text
 
size
=
"sm"
 
style
=
{
{
 color
:
 
'#666'
 
}
}
>
              
Range
:
 
{
temperatureRange
[
0
]
}
°
C
 
-
 
{
temperatureRange
[
1
]
}
°
C
            
</Text
>
          
</Block
>
        
</Block
>
      
</Card
>
 
    
</Block
>
  
)
;
}

Value label customization

valueLabelPosition chooses where the thumb tooltip sits (top / bottom for horizontal, left / right for vertical). valueLabelOffset tunes the gap from the thumb. valueLabelProps accepts any <Text> props — ff, weight, size, color, style — and valueLabelStyle overrides the wrapper Card's style. Set valueLabelAsCard={false} for a flat tooltip with no Card chrome. Both <Slider> and <RangeSlider> accept the same set of props.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Row
,
 
Slider
,
 
RangeSlider
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
a
,
 setA
]
 
=
 
useState
(
40
)
;
  
const
 
[
b
,
 setB
]
 
=
 
useState
(
60
)
;
  
const
 
[
c
,
 setC
]
 
=
 
useState
(
72
)
;
  
const
 
[
d
,
 setD
]
 
=
 useState
<
[
number
,
 
number
]
>
(
[
20
,
 
80
]
)
;
 
  
return
 
(
    
<Block
>
      
<Text
 
weight
=
"semibold"
>
Value
 label position 
&
 styling
</Text
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
Default
 — tooltip above the thumb
</Text
>
        
<Slider
 
value
=
{
a
}
 
onChange
=
{
setA
}
 valueLabelAlwaysOn 
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
valueLabelPosition
=
"bottom"
</Text
>
        
<Slider
          
value
=
{
b
}
          
onChange
=
{
setB
}
          valueLabelAlwaysOn
          
valueLabelPosition
=
"bottom"
          
valueLabelOffset
=
{
2
}
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
Custom
 
Text
 styling — 
`ff`
,
 
`weight`
,
 
`size`
,
 
`color`
        
</Text
>
        
<Slider
          
value
=
{
c
}
          
onChange
=
{
setC
}
          valueLabelAlwaysOn
          
valueLabelProps
=
{
{
            ff
:
 
'monospace'
,
            weight
:
 
'700'
,
            size
:
 
'md'
,
            color
:
 
'primary'
,
          
}
}
          
valueLabel
=
{
(
v
)
 
=>
 
`${Math.round(v)}%`
}
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
Flat
 
tooltip
 
(
no 
Card
)
 with custom wrapper style
        
</Text
>
        
<Slider
          
value
=
{
c
}
          
onChange
=
{
setC
}
          valueLabelAlwaysOn
          
valueLabelAsCard
=
{
false
}
          
valueLabelStyle
=
{
{
            backgroundColor
:
 
'rgba(15, 23, 42, 0.92)'
,
            paddingHorizontal
:
 
8
,
            paddingVertical
:
 
4
,
            borderRadius
:
 
6
,
          
}
}
          
valueLabelProps
=
{
{
 ff
:
 
'monospace'
,
 weight
:
 
'600'
,
 color
:
 
'#fff'
 
}
}
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
RangeSlider
 — both thumbs share placement 
+
 styling
        
</Text
>
        
<RangeSlider
          
value
=
{
d
}
          
onChange
=
{
setD
}
          valueLabelAlwaysOn
          
valueLabelPosition
=
"bottom"
          
valueLabelProps
=
{
{
 weight
:
 
'700'
,
 size
:
 
'sm'
 
}
}
          
valueLabel
=
{
(
v
,
 i
)
 
=>
 
(
i 
===
 
0
 
?
 
`min ${Math.round(v)}`
 
:
 
`max ${Math.round(v)}`
)
}
        
/>
      
</Block
>
 
      
<Block
 
align
=
"center"
 
direction
=
"row"
>
 
        
<Block
 
style
=
{
{
 height
:
 
200
 
}
}
>
            
<Slider
              
value
=
{
a
}
              
onChange
=
{
setA
}
              
orientation
=
"vertical"
              valueLabelAlwaysOn
              
valueLabelPosition
=
"left"
              
valueLabelProps
=
{
{
 weight
:
 
'700'
 
}
}
              
minH
=
{
80
}
            
/>
          
</Block
>
        
<Block
 
style
=
{
{
 height
:
 
200
 
}
}
>
            
<Slider
              
value
=
{
b
}
              
onChange
=
{
setB
}
              
orientation
=
"vertical"
              valueLabelAlwaysOn
              
valueLabelPosition
=
"right"
              
valueLabelProps
=
{
{
 weight
:
 
'700'
 
}
}
            
/>
            
<Text
 
size
=
"xs"
 
color
=
"muted"
>
right
</Text
>
          
</Block
>
      
</Block
>
    
</Block
>
  
)
;
}

Decimal steps & precision

The thumb tooltip formats its value from the step: a fractional step like 0.01 shows two decimals, while an integer step rounds to a whole number (trailing zeros are trimmed, so 0.10 reads as 0.1). Pass precision to force a fixed number of decimals regardless of the step.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Slider
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
position
,
 setPosition
]
 
=
 
useState
(
0.25
)
;
  
const
 
[
temp
,
 setTemp
]
 
=
 
useState
(
21.5
)
;
  
const
 
[
ratio
,
 setRatio
]
 
=
 
useState
(
0.5
)
;
 
  
return
 
(
    
<Block
>
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
Fractional
 
`step={0.01}`
 — decimals are inferred 
from
 the step
        
</Text
>
        
<Slider
          
value
=
{
position
}
          
onChange
=
{
setPosition
}
          
min
=
{
0
}
          
max
=
{
1
}
          
step
=
{
0.01
}
          valueLabelAlwaysOn
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
`step={0.5}`
 — half steps
        
</Text
>
        
<Slider
          
value
=
{
temp
}
          
onChange
=
{
setTemp
}
          
min
=
{
16
}
          
max
=
{
30
}
          
step
=
{
0.5
}
          valueLabelAlwaysOn
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
Force
 decimals with 
`precision={2}`
 
(
independent of step
)
        
</Text
>
        
<Slider
          
value
=
{
ratio
}
          
onChange
=
{
setRatio
}
          
min
=
{
0
}
          
max
=
{
1
}
          
step
=
{
0.1
}
          
precision
=
{
2
}
          valueLabelAlwaysOn
        
/>
      
</Block
>
    
</Block
>
  
)
;
}

Slot styling

Each visual layer of the slider is independently customizable: trackStyle and activeTrackStyle for the track halves, thumbStyle for the handle, tickStyle / activeTickStyle for tick marks, and tickLabelProps for tick labels. Per-tick style overrides on individual ticks[i].style win over the global tick styles. Combined with the value-label slot props (valueLabelStyle, valueLabelProps) you can fully reskin the slider without forking it.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Slider
,
 
RangeSlider
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 milestoneTicks 
=
 
[
  
{
 value
:
 
0
,
 label
:
 
'0'
 
}
,
  
{
 value
:
 
25
,
 label
:
 
'25'
 
}
,
  
{
 value
:
 
50
,
 label
:
 
'50'
 
}
,
  
{
 value
:
 
75
,
 label
:
 
'75'
 
}
,
  
{
 value
:
 
100
,
 label
:
 
'100'
 
}
,
]
;
 
const
 milestoneTicksWithHighlight 
=
 milestoneTicks
.
map
(
(
t
)
 
=>
  t
.
value 
===
 
50
    
?
 
{
        
.
.
.
t
,
        
// per-tick override wins over the global tickStyle / activeTickStyle
        style
:
 
{
          width
:
 
4
,
          height
:
 
14
,
          backgroundColor
:
 
'#facc15'
,
          borderRadius
:
 
2
,
          top
:
 
11
,
        
}
,
      
}
    
:
 t
,
)
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
a
,
 setA
]
 
=
 
useState
(
35
)
;
  
const
 
[
b
,
 setB
]
 
=
 
useState
(
60
)
;
  
const
 
[
c
,
 setC
]
 
=
 
useState
(
50
)
;
  
const
 
[
d
,
 setD
]
 
=
 useState
<
[
number
,
 
number
]
>
(
[
20
,
 
80
]
)
;
 
  
return
 
(
    
<Block
>
      
<Text
 
weight
=
"semibold"
>
Slot
 styling
</Text
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
Track
 
+
 thumb overrides — taller track
,
 square thumb
        
</Text
>
        
<Slider
          
value
=
{
a
}
          
onChange
=
{
setA
}
          
trackStyle
=
{
{
 height
:
 
10
,
 borderRadius
:
 
2
 
}
}
          
activeTrackStyle
=
{
{
 height
:
 
10
,
 borderRadius
:
 
2
 
}
}
          
thumbStyle
=
{
{
 borderRadius
:
 
4
,
 borderWidth
:
 
0
 
}
}
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
Branded
 thumb — gradient
-
style fill via solid color 
+
 shadow
        
</Text
>
        
<Slider
          
value
=
{
b
}
          
onChange
=
{
setB
}
          
activeTrackColor
=
"#10b981"
          
thumbStyle
=
{
{
            backgroundColor
:
 
'#0ea5e9'
,
            borderColor
:
 
'#0369a1'
,
            borderWidth
:
 
2
,
            shadowColor
:
 
'#0ea5e9'
,
            shadowOffset
:
 
{
 width
:
 
0
,
 height
:
 
0
 
}
,
            shadowOpacity
:
 
0.4
,
            shadowRadius
:
 
8
,
          
}
}
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
Tick
 
+
 label 
styling
 
(
`tickStyle`
,
 
`activeTickStyle`
,
 
`tickLabelProps`
)
        
</Text
>
        
<Slider
          
value
=
{
c
}
          
onChange
=
{
setC
}
          
ticks
=
{
milestoneTicks
}
          
tickStyle
=
{
{
 width
:
 
3
,
 height
:
 
10
,
 borderRadius
:
 
1.5
,
 top
:
 
13
 
}
}
          
activeTickStyle
=
{
{
 width
:
 
3
,
 height
:
 
12
,
 borderRadius
:
 
1.5
,
 top
:
 
12
 
}
}
          
tickLabelProps
=
{
{
 ff
:
 
'monospace'
,
 size
:
 
'xs'
,
 weight
:
 
'700'
 
}
}
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
Per
-
tick override — the tick at 
50
 is taller and yellow
        
</Text
>
        
<Slider
          
value
=
{
c
}
          
onChange
=
{
setC
}
          
ticks
=
{
milestoneTicksWithHighlight
}
          
tickStyle
=
{
{
 width
:
 
3
,
 height
:
 
10
,
 borderRadius
:
 
1.5
,
 top
:
 
13
 
}
}
          
activeTickStyle
=
{
{
 width
:
 
3
,
 height
:
 
10
,
 borderRadius
:
 
1.5
,
 top
:
 
13
 
}
}
          
tickLabelProps
=
{
{
 size
:
 
'xs'
 
}
}
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          
RangeSlider
 — same slot props work on both thumbs and the active band
        
</Text
>
        
<RangeSlider
          
value
=
{
d
}
          
onChange
=
{
setD
}
          
ticks
=
{
milestoneTicks
}
          
activeTrackColor
=
"#a855f7"
          
trackStyle
=
{
{
 height
:
 
8
,
 borderRadius
:
 
4
 
}
}
          
activeTrackStyle
=
{
{
 height
:
 
8
,
 borderRadius
:
 
4
 
}
}
          
thumbStyle
=
{
{
 backgroundColor
:
 
'#a855f7'
,
 borderColor
:
 
'#7e22ce'
,
 borderWidth
:
 
2
 
}
}
          
tickStyle
=
{
{
 width
:
 
2
,
 height
:
 
8
,
 top
:
 
14
 
}
}
          
activeTickStyle
=
{
{
 width
:
 
2
,
 height
:
 
8
,
 top
:
 
14
,
 backgroundColor
:
 
'#a855f7'
 
}
}
          
tickLabelProps
=
{
{
 size
:
 
'xs'
,
 color
:
 
'muted'
 
}
}
          valueLabelAlwaysOn
          
valueLabelProps
=
{
{
 weight
:
 
'700'
,
 size
:
 
'sm'
 
}
}
        
/>
      
</Block
>
    
</Block
>
  
)
;
}

Vertical Orientation

Vertical slider orientation for space-efficient layouts and different use cases.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Slider
,
 
Text
,
 
Row
,
 
Card
,
 
Block
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 
useState
(
60
)
;
 
  
return
 
(
    
<Card
>
      
<Row
 
gap
=
{
16
}
 
align
=
"center"
>
        
<Block
 
style
=
{
{
 height
:
 
200
 
}
}
>
          
<Slider
            
value
=
{
value
}
            
onChange
=
{
setValue
}
            
min
=
{
0
}
            
max
=
{
100
}
            
step
=
{
1
}
            
orientation
=
"vertical"
          
/>
        
</Block
>
        
<Block
>
          
<Text
 
size
=
"lg"
 
weight
=
"semibold"
>
Vertical
 
Slider
</Text
>
          
<Text
 
size
=
"sm"
 
style
=
{
{
 color
:
 
'#666'
 
}
}
>
            
Value
:
 
{
value
}
          
</Text
>
        
</Block
>
      
</Row
>
    
</Card
>
  
)
;
}

CustomStyles

Showcases how to restyle the Slider using the new color scheme, sizing, and style override props for both single-value and range scenarios.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Slider
,
 
RangeSlider
,
 
Text
,
 
Card
,
 
Block
,
 
Flex
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
volume
,
 setVolume
]
 
=
 
useState
(
65
)
;
  
const
 
[
range
,
 setRange
]
 
=
 useState
<
[
number
,
 
number
]
>
(
[
20
,
 
80
]
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<Card
>
        
<Block
>
          
<Text
 
size
=
"lg"
 
weight
=
"semibold"
>
Palette
-
driven slider
</Text
>
          
<Text
 
size
=
"sm"
 
style
=
{
{
 color
:
 
'#555'
 
}
}
>
            
`colorScheme`
,
 sizing overrides
,
 and style props 
let
 the slider carry product branding
.
          
</Text
>
          
<Slider
            
value
=
{
volume
}
            
onChange
=
{
setVolume
}
            
min
=
{
0
}
            
max
=
{
100
}
            
step
=
{
1
}
            showTicks
            
tickColor
=
"rgba(52, 199, 89, 0.2)"
            
activeTickColor
=
"#34C759"
            
color
=
"success"
            
trackSize
=
{
12
}
            
thumbSize
=
{
30
}
            
trackStyle
=
{
{
 opacity
:
 
0.25
 
}
}
            
activeTrackStyle
=
{
{
              shadowColor
:
 
'#34C759'
,
              shadowOpacity
:
 
0.35
,
              shadowRadius
:
 
8
,
              shadowOffset
:
 
{
 width
:
 
0
,
 height
:
 
4
 
}
,
            
}
}
            
thumbStyle
=
{
{
 borderColor
:
 
'#1F5520'
,
 borderWidth
:
 
3
 
}
}
            
valueLabel
=
{
(
val
)
 
=>
 
`${Math.round(val)}%`
}
            valueLabelAlwaysOn
            
label
=
"Success palette"
          
/>
          
<Flex
 
justify
=
"space-between"
>
            
<Text
 
size
=
"sm"
>
Volume
:
 
{
Math
.
round
(
volume
)
}
%
</Text
>
            
<Text
 
size
=
"sm"
 
style
=
{
{
 color
:
 
'#1F5520'
 
}
}
>
Styled
 thumb 
+
 ticks
</Text
>
          
</Flex
>
        
</Block
>
      
</Card
>
 
      
<Card
>
        
<Block
>
          
<Text
 
size
=
"lg"
 
weight
=
"semibold"
>
Custom
 range slider
</Text
>
          
<Text
 
size
=
"sm"
 
style
=
{
{
 color
:
 
'#555'
 
}
}
>
            
RangeSlider
 shares the same overrides
,
 making it easy to mix palettes per context
.
          
</Text
>
          
<RangeSlider
            
value
=
{
range
}
            
onChange
=
{
setRange
}
            
min
=
{
0
}
            
max
=
{
120
}
            
step
=
{
5
}
            showTicks
            
color
=
"warning"
            
trackSize
=
{
10
}
            
thumbSize
=
{
26
}
            
trackStyle
=
{
{
 opacity
:
 
0.2
 
}
}
            
activeTrackStyle
=
{
{
 opacity
:
 
0.55
 
}
}
            
thumbStyle
=
{
{
 borderColor
:
 
'#B45309'
,
 borderWidth
:
 
2
 
}
}
            
tickColor
=
"rgba(251, 191, 36, 0.25)"
            
activeTickColor
=
"#F59E0B"
            
valueLabel
=
{
(
val
,
 idx
)
 
=>
 
`${idx === 0 ? 'Min' : 'Max'} ${val}`
}
            valueLabelAlwaysOn
            
label
=
"Warning palette"
          
/>
          
<Flex
 
justify
=
"space-between"
>
            
<Text
 
size
=
"sm"
>
Range
:
 
{
range
[
0
]
}
 – 
{
range
[
1
]
}
</Text
>
            
<Text
 
size
=
"sm"
 
style
=
{
{
 color
:
 
'#B45309'
 
}
}
>
Custom
 palette 
+
 styles
</Text
>
          
</Flex
>
        
</Block
>
      
</Card
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Slider

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap