↗
ButtonsSlider
iOS
Android
Web
A segmented control with a smooth animated selection indicator. Set orientation to horizontal or vertical. Provides full style control over the track, indicator, and each item.
Import
tsx
import { ButtonsSlider, type ButtonSliderProps } from 'react-native-cross-elements';
Horizontal slider
button-slider.tsx
Day
Week
Month
Selected: Day
Props
indicator color
indigo
zinc
Vertical slider
tsx
<ButtonsSlider options={['Option A', 'Option B', 'Option C']} initialIndex={0} onSelect={(i) => console.log('selected', i)} orientation="vertical" sliderContainerStyle={{ backgroundColor: '#18181b', borderRadius: 12, padding: 4 }} sliderStyle={{ backgroundColor: '#27272a' }} sliderItemButtonStyle={({ isSelected }) => ({ backgroundColor: isSelected ? '#6366f1' : 'transparent', })} sliderItemTextStyle={({ isSelected }) => ({ color: isSelected ? '#fff' : '#71717a', fontWeight: isSelected ? '600' : '400', })} style={{ width: 140, height: 132 }} />
Style callbacks
sliderItemButtonStyle and sliderItemTextStyle receive a state object with focused and isSelected so you can apply conditional styles.
For web styling, use buttonClassName / textClassName / sliderRoundClassName to apply Tailwind or custom CSS classes.
Props
Prop
Type
Default
Description
options
req
string[]
Array of option labels.
initialIndex
req
number
Initially selected index (zero-based).
onSelect
req
(index: number) => void
Called when selection changes.
orientation
'horizontal' | 'vertical'
'horizontal'
Layout direction of the slider.
style
ViewStyle
Outer container style.
sliderContainerStyle
ViewStyle
Style for the outer track background.
sliderStyle
ViewStyle
Style for the animated selection indicator.
sliderItemButtonStyle
(state: SliderButtonStyle) => ViewStyle
Style for each item button.
sliderItemTextStyle
(state: SliderTextStyle) => TextStyle
Style for each item label.
buttonClassName
string
Web CSS class for item buttons.
textClassName
string
Web CSS class for item labels.
sliderRoundClassName
string
Web CSS class for the animated indicator.