Slider

iOS 16.4+iPadOS 16.4+

Displays a control for selecting a value from a bounded range.

import SwiftUIstruct SliderUsageExample: View {    @State private var brightness = 0.6    var body: some View {        FLXFieldLabel("Brightness") {            FLXSlider("Brightness", value: $brightness)        }        .padding(FLXSpacing.xl)    }}

Installation

Requires the design system foundation (tokens and theme).

pnpm dlx shadcn@latest add https://swiftui.flexnative.com/r/ios-slider.json

Usage

FLXSlider("Brightness", value: $brightness)

The title is read by VoiceOver but not rendered. Pair FLXSlider with FLXFieldLabel for a visible caption.

Range and step

Pass in: for custom bounds and step: to snap to increments. Defaults to 0...1 with no step.

FLXSlider("Text Size", value: $textSize, in: 1...5, step: 1)

Custom styling

SwiftUI's Slider has no style protocol, so there's no FLXSliderStyle or override. FLXSlider applies .tint(_:) with the theme's primary color. Track height, thumb shape, and range (two-thumb) sliders require a custom view.

API Reference

FLXSlider

init(    value: Binding<Double>,    in bounds: ClosedRange<Double> = 0...1,    step: Double.Stride? = nil,    @ViewBuilder label: @escaping () -> Label)init(    _ titleKey: LocalizedStringKey = "",    value: Binding<Double>,    in bounds: ClosedRange<Double> = 0...1,    step: Double.Stride? = nil)init(    _ titleResource: LocalizedStringResource,    value: Binding<Double>,    in bounds: ClosedRange<Double> = 0...1,    step: Double.Stride? = nil)init<S: StringProtocol>(    _ title: S,    value: Binding<Double>,    in bounds: ClosedRange<Double> = 0...1,    step: Double.Stride? = nil)

For more information about FLXSlider props, see the Apple documentation.