TTBaseSUISlider

SwiftUI Core

SwiftUI slider with 3 visual types: plain, with min/max labels, and with a live value display. Supports configurable range, step, tint color, and two-way binding. Designed to match TTBaseUIKit's visual language.


🎨 Types

public enum TYPE {
    case DEFAULT        // Plain slider, no labels
    case WITH_LABELS    // Min and max value labels on sides
    case WITH_VALUE     // Current value displayed above thumb
}

🚀 Usage

// Basic slider 0–100
@State private var volume: Double = 50

TTBaseSUISlider(value: $volume, range: 0...100)

// With min/max labels
TTBaseSUISlider(
    value: $brightness,
    range: 0...1,
    type: .WITH_LABELS,
    minLabel: "0%",
    maxLabel: "100%"
)

// With live value display
TTBaseSUISlider(
    value: $fontSize,
    range: 10...32,
    step: 1,
    type: .WITH_VALUE
)

// Custom tint
TTBaseSUISlider(
    value: $opacity,
    range: 0...1,
    tintColor: .systemOrange
)

// Sound settings
@State private var soundVolume: Double = 0.7

VStack(alignment: .leading, spacing: 8) {
    TTBaseSUIText(text: "Volume", type: .TITLE)
    TTBaseSUISlider(
        value: $soundVolume,
        range: 0...1,
        step: 0.01,
        type: .WITH_LABELS,
        minLabel: "🔈",
        maxLabel: "🔊"
    )
    .onChange(of: soundVolume) { newValue in
        AudioManager.shared.volume = newValue
    }
}

📖 Initializer Parameters

ParameterTypeDefaultDescription
valueBinding<Double>Current slider value (two-way)
rangeClosedRange<Double>0...1Min to max range
stepDouble0.01Increment step
typeTYPE.DEFAULTVisual variant
minLabelString""Label for min end (WITH_LABELS)
maxLabelString""Label for max end (WITH_LABELS)
tintColorColortheme primarySlider track tint
Pro Tip: Use .WITH_VALUE for precision inputs (font size, zoom level) — the live value indicator removes the need for a separate label. Use .WITH_LABELS with emoji or icon characters for quick visual context.