Slider

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 {        Form {            FLXSlider("Brightness", value: $brightness)        }        .padding(FLXSpacing.xl)    }}

Show more

Installation

Requires the design system foundation (tokens and theme).

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

Usage

FLXSlider("Brightness", value: $brightness)

On macOS, the title is shown beside the slider, like SwiftUI's Slider on the Mac. Place it in a Form so the title gets the system's spacing and column alignment; outside a Form, SwiftUI draws the title right against the track. To show it above instead, pass an empty title and pair FLXSlider with FLXFieldLabel.

Range and step

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

Form {  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.