Slider

• Range Selection: Represents a value within a defined valueRange (defaults to 0f..1f).
• Thumb and track: Consists of a draggable thumb and a visual track indicating the range and current value.
• Interaction: Supports dragging the thumb or tapping/clicking on the track to set a value.
• Theming: Track and thumb colors are derived from SpatialTheme (SliderDefaults).
• Haptics/Audio Feedback: (Not directly part of the composable, but recommended to add externally based on value changes or interaction events).

• Composable: SpatialSliderLarge
• Appearance: Thickest track (40.dp), large circular thumb. Can display an icon *inside- the thumb.
• Usage: Prominent controls, often for primary settings like master volume.

• Composable: SpatialSliderMedium
• Appearance: Medium thickness track (28.dp), standard circular thumb (no internal icon).
• Usage: General purpose sliders where space is less constrained than for SpatialSliderSmall.

• Composable: SpatialSliderSmall
• Appearance: Thinnest track (8.dp), small circular thumb.
• Usage: Compact controls, often used for fine-tuning or within dense UI layouts.

• value: Float: The current value of the slider. Must be within the implicit or explicit valueRange.
• onChanged: (Float) -> Unit: Callback invoked continuously as the slider value changes during drag or after a tap. This is where you update your state.
• modifier: Modifier = Modifier: Standard Compose modifier.
• onValueChangedFinished: () -> Unit = {}: Callback invoked *after- the user finishes interacting (for example, lifts finger/releases click). Useful for triggering actions that shouldn’t happen during continuous dragging (like saving a setting).
• thumbIcon: @Composable (() -> Unit)? = null: Only applicable to SpatialSliderLarge. A composable for an icon displayed *inside- the large thumb. Ignored by Medium/Small.
• helperText: Pair<String, String>? = null: Optional pair of strings displayed below the slider track, aligned to the start and end (for example, “Low”, “High”).
• helperIcons: Pair<@Composable () -> Unit, @Composable () -> Unit>? = null: Optional pair of composables for icons displayed below the slider track, aligned to the start and end (for example, Volume Down/Up icons).

import com.meta.spatial.uiset.slider.*
import androidx.compose.runtime.*
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.VolumeUp
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.BrightnessMedium
import androidx.compose.material.icons.filled.Remove
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.unit.dp

var volume by remember { mutableFloatStateOf(0.7f) }
var brightness by remember { mutableFloatStateOf(0.3f) }
var effect by remember { mutableFloatStateOf(0.5f) }

Column(modifier = Modifier.padding(16.dp).width(300.dp)) { // Example width
    Text("Volume")
    SpatialSliderLarge(
        value = volume,
        onChanged = { volume = it },
        onValueChangedFinished = { println("Volume set to $volume") },
        thumbIcon = { Icon(Icons.AutoMirrored.Default.VolumeUp, null) },
        helperIcons = Pair(
            { Icon(Icons.Default.Remove, null) }, // Example: Volume Down
            { Icon(Icons.Default.Add, null) }    // Example: Volume Up
        )
    )

    Spacer(Modifier.height(24.dp))

    Text("Brightness")
    SpatialSliderMedium(
        value = brightness,
        onChanged = { brightness = it },
        helperText = Pair("Dim", "Bright")
        // No thumbIcon param for Medium
    )

    Spacer(Modifier.height(24.dp))

    Text("Effect Intensity")
    SpatialSliderSmall(
        value = effect,
        onChanged = { effect = it }
        // No thumbIcon param for Small
    )
}