CompactSlider

You can use CompactSlider to manage single values, ranges, or multiple values. Import CompactSlider to access the components.

Single Value

Use value: $binding for a single scalar value.

Range and Steps

Use in: range and step: value to constrain the slider and snap to increments.

Range Selection

Use from: $minBinding and to: $maxBinding to select a range between two values.

Multiple Values

Use values: $arrayBinding to manage an array of multiple markers.

import CompactSlider

// Single value
@State private var volume: Double = 0.5
CompactSlider(value: $volume)
    .frame(height: 44)

// With range and steps
@State private var brightness: Double = 50
CompactSlider(value: $brightness, in: 0...100, step: 5)
    .frame(height: 44)

// Range selection
@State private var minPrice: Double = 20
@State private var maxPrice: Double = 80
CompactSlider(from: $minPrice, to: $maxPrice, in: 0...100)
    .frame(height: 44)

// Multiple values
@State private var markers: [Double] = [0.2, 0.5, 0.8]
CompactSlider(values: $markers)
    .frame(height: 44)

Interaction Options

Use .compactSliderOptionsByAdding(...) to enable specific behaviors:

• .tapToSlide: Set value on click.
• .scrollWheel: macOS scroll wheel support.
• .snapToSteps: Snap while dragging.
• .precisionControl(): Drag perpendicular to the slider for fine control.

Visual Customization

• Colors: Use .accentColor(_:).
• Scale: Use .compactSliderScale(visibility:lineLength:color:) to customize the tick marks.
• Handle: Use .compactSliderHandleStyle(_:) to change the handle shape (e.g., .circle(visibility:radius:)).

// Common Options
CompactSlider(value: $value)
    .compactSliderOptionsByAdding(
        .tapToSlide,
        .scrollWheel,
        .snapToSteps,
        .precisionControl()
    )

// Colors and styling
CompactSlider(value: $value)
    .accentColor(.purple)

// Custom scale
CompactSlider(value: $value)
    .compactSliderScale(
        visibility: .always,
        lineLength: 8,
        color: .blue
    )

// Custom handle
CompactSlider(value: $value)
    .compactSliderHandleStyle(
        .circle(visibility: .always, radius: 20)
    )

You can create custom slider appearances by implementing the CompactSliderStyle protocol. This follows the same pattern as SwiftUI's ButtonStyle. The makeBody(configuration:) method provides a Configuration object containing:

• label: The content provided in the slider's closure.
• isHovering: Boolean indicating if the user is hovering.
• isDragging: Boolean indicating if the user is currently dragging the handle.

Apply your custom style using the .compactSliderStyle() modifier.

public struct CustomCompactSliderStyle: CompactSliderStyle {
    public func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(
                configuration.isHovering || configuration.isDragging ? .orange : .black
            )
            .background(Color.orange.opacity(0.1))
            .accentColor(.orange)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

// Usage
CompactSlider(value: $value) {
    Text("Custom Style")
}
.compactSliderStyle(.custom)

Use the .compactSliderStyle(default:) modifier to change the layout and interaction model of the slider.

Linear Sliders

• Horizontal: Alignments include .leading, .center, and .trailing.
• Vertical: Alignments include .top, .center, and .bottom.
• Scrollable: Use .scrollable() for a fixed handle with a moving scale.

Grid Sliders

• Grid: Use .grid() for 2D point selection using a CGPoint binding.
• Circular Grid: Use .circularGrid() for polar coordinate selection using a CompactSliderPolarPoint binding.

// Horizontal alignments
CompactSlider(value: $value)
    .compactSliderStyle(default: .horizontal(.leading))

// Vertical alignments
CompactSlider(value: $value)
    .compactSliderStyle(default: .vertical(.center))
    .frame(width: 44)

// Scrollable (fixed handle, moving scale)
CompactSlider(value: $value)
    .compactSliderStyle(default: .scrollable())
    .frame(height: 44)

// Grid (2D point selection)
@State private var point = CGPoint(x: 50, y: 50)
CompactSlider(point: $point, in: .zero...CGPoint(x: 100, y: 100))
    .compactSliderStyle(default: .grid())
    .frame(width: 200, height: 200)

// Circular grid (polar coordinates)
@State private var polarPoint = CompactSliderPolarPoint(angle: .zero, normalizedRadius: 0.5)
CompactSlider(polarPoint: $polarPoint)
    .compactSliderStyle(default: .circularGrid())
    .frame(width: 200, height: 200)

You can customize the colors and shapes of secondary slider elements (progress view, handle, scale) using several modifiers:

1. .compactSliderSecondaryColor(...):
   • Set a single color and opacity for all secondary elements.
   • Or, provide specific values for progressOpacity, handleOpacity, scaleOpacity, and secondaryScaleOpacity.
2. .compactSliderSecondaryAppearance(...):
   • Allows setting ShapeStyle (like gradients) for the progressShapeStyle and focusedProgressShapeStyle.
   • Allows setting specific colors for the handleColor, scaleColor, and secondaryScaleColor.

// Example: Using gradients and specific colors for secondary elements
configuration.label
    .compactSliderSecondaryAppearance(
        progressShapeStyle: LinearGradient(
            colors: [.orange.opacity(0), .orange.opacity(0.5)],
            startPoint: .leading,
            endPoint: .trailing
        ),
        focusedProgressShapeStyle: LinearGradient(
            colors: [.yellow.opacity(0.2), .orange.opacity(0.7)],
            startPoint: .leading,
            endPoint: .trailing
        ),
        handleColor: .orange,
        scaleColor: .orange,
        secondaryScaleColor: .orange
    )