↗
↗
↗
↗
☰
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.