iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:slider:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.slider.*

Three properties, and the interesting one is the slot. The value is the whole reason ⤷ Track exists. A slider’s value is continuous, and Figma has no property type for that — so rather than enumerate it as eleven variants at 10% steps, the component makes the track a slot and lets DraggableFill be resized inside it. The slot is not content anyone swaps; it is a value control wearing a slot’s clothes. Natively it maps to the binding, which is where a value belongs, so the thing that looks least like an API in Figma is the one that maps most directly. range, step, min and max have no Figma form at all and are the native API’s own — they get no row here, because a row would imply Figma says something about them.

EBSlider(
    value: $amount,
    in: 0...100,
    showsTooltip: true
)

EBSlider(
    value = amount,
    onValueChange = { amount = it },
    valueRange = 0f..100f,
    showsTooltip = true
)

EBSlider(
    value: $amount,
    in: 0...100,
    showsTooltip: true
)
.disabled(true)

EBSlider(
    value = amount,
    onValueChange = { amount = it },
    valueRange = 0f..100f,
    showsTooltip = true,
    enabled = false
)

EBSlider(
    value: $amount,
    in: 0...100,
    showsTooltip: true
)
// Pressed is the drag — there is nothing to pass

EBSlider(
    value = amount,
    onValueChange = { amount = it },
    valueRange = 0f..100f,
    showsTooltip = true
)
// Pressed is the drag — there is nothing to pass

3 State values × 2 hasTooltip values = 6 variants. The value is not an axis — it is the width of DraggableFill, resized through the slot.