@lattice-ui/slider 0.3.0

package/README.md

@@ -0,0 +1,18 @@
+# @lattice-ui/slider
+
+Headless single-thumb slider primitives for Roblox UI.
+
+## Exports
+
+- `Slider`
+- `Slider.Root`
+- `Slider.Track`
+- `Slider.Range`
+- `Slider.Thumb`
+
+## Notes
+
+- Single-thumb only in this release.
+- Supports controlled/uncontrolled `value`.
+- Pointer drag and keyboard adjustments are both supported.
+- Values are clamped to `[min, max]` and snapped to `step`.

package/out/Slider/SliderRange.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { SliderRangeProps } from "./types";
+export declare function SliderRange(props: SliderRangeProps): React.JSX.Element;

package/out/Slider/SliderRange.luau

@@ -0,0 +1,33 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useSliderContext = TS.import(script, script.Parent, "context").useSliderContext
+local valueToPercent = TS.import(script, script.Parent, "internals", "math").valueToPercent
+local function SliderRange(props)
+	local sliderContext = useSliderContext()
+	local percent = valueToPercent(sliderContext.value, sliderContext.min, sliderContext.max)
+	local rangeSize = if sliderContext.orientation == "horizontal" then UDim2.fromScale(percent, 1) else UDim2.fromScale(1, percent)
+	local rangePosition = if sliderContext.orientation == "horizontal" then UDim2.fromScale(0, 0) else UDim2.fromScale(0, 1 - percent)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SliderRange] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Name = "SliderRange",
+			Position = rangePosition,
+			Size = rangeSize,
+		}, child)
+	end
+	return React.createElement("frame", {
+		BackgroundColor3 = Color3.fromRGB(86, 142, 255),
+		BorderSizePixel = 0,
+		Position = rangePosition,
+		Size = rangeSize,
+	}, props.children)
+end
+return {
+	SliderRange = SliderRange,
+}

package/out/Slider/SliderRoot.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { SliderProps } from "./types";
+export declare function SliderRoot(props: SliderProps): React.JSX.Element;

package/out/Slider/SliderRoot.luau

@@ -0,0 +1,203 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local useControllableState = _core.useControllableState
+local SliderContextProvider = TS.import(script, script.Parent, "context").SliderContextProvider
+local _math = TS.import(script, script.Parent, "internals", "math")
+local normalizeBounds = _math.normalizeBounds
+local normalizeStep = _math.normalizeStep
+local pointerPositionToValue = _math.pointerPositionToValue
+local snapValueToStep = _math.snapValueToStep
+local UserInputService = game:GetService("UserInputService")
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function isPointerStartInput(inputObject)
+	return inputObject.UserInputType == Enum.UserInputType.MouseButton1 or inputObject.UserInputType == Enum.UserInputType.Touch
+end
+local function SliderRoot(props)
+	local _condition = props.min
+	if _condition == nil then
+		_condition = 0
+	end
+	local _condition_1 = props.max
+	if _condition_1 == nil then
+		_condition_1 = 100
+	end
+	local bounds = normalizeBounds(_condition, _condition_1)
+	local min = bounds.min
+	local max = bounds.max
+	local _condition_2 = props.step
+	if _condition_2 == nil then
+		_condition_2 = 1
+	end
+	local step = normalizeStep(_condition_2)
+	local orientation = props.orientation or "horizontal"
+	local disabled = props.disabled == true
+	local _condition_3 = props.defaultValue
+	if _condition_3 == nil then
+		_condition_3 = min
+	end
+	local defaultValue = snapValueToStep(_condition_3, min, max, step)
+	local _binding = useControllableState({
+		value = props.value,
+		defaultValue = defaultValue,
+		onChange = props.onValueChange,
+	})
+	local valueState = _binding[1]
+	local setValueState = _binding[2]
+	local value = snapValueToStep(valueState, min, max, step)
+	local trackRef = React.useRef()
+	local thumbRef = React.useRef()
+	local latestValueRef = React.useRef(value)
+	React.useEffect(function()
+		latestValueRef.current = value
+	end, { value })
+	local setValue = React.useCallback(function(nextValue)
+		if disabled then
+			return nil
+		end
+		local normalizedValue = snapValueToStep(nextValue, min, max, step)
+		latestValueRef.current = normalizedValue
+		setValueState(normalizedValue)
+	end, { disabled, max, min, setValueState, step })
+	local commitValue = React.useCallback(function(nextValue)
+		if disabled then
+			return nil
+		end
+		local normalizedValue = snapValueToStep(nextValue, min, max, step)
+		local _result = props.onValueCommit
+		if _result ~= nil then
+			_result(normalizedValue)
+		end
+	end, { disabled, max, min, props.onValueCommit, step })
+	local activeDragInputRef = React.useRef()
+	local moveConnectionRef = React.useRef()
+	local endConnectionRef = React.useRef()
+	local disconnectDragging = React.useCallback(function()
+		local _result = moveConnectionRef.current
+		if _result ~= nil then
+			_result:Disconnect()
+		end
+		moveConnectionRef.current = nil
+		local _result_1 = endConnectionRef.current
+		if _result_1 ~= nil then
+			_result_1:Disconnect()
+		end
+		endConnectionRef.current = nil
+		activeDragInputRef.current = nil
+	end, {})
+	local updateValueFromInput = React.useCallback(function(inputObject)
+		local trackNode = trackRef.current
+		if not trackNode then
+			return nil
+		end
+		local pointerPosition = Vector2.new(inputObject.Position.X, inputObject.Position.Y)
+		local nextValue = pointerPositionToValue(pointerPosition, trackNode.AbsolutePosition, trackNode.AbsoluteSize, min, max, step, orientation)
+		setValue(nextValue)
+		return nextValue
+	end, { max, min, orientation, setValue, step })
+	local finishDrag = React.useCallback(function(inputObject)
+		local activeDragInput = activeDragInputRef.current
+		if not activeDragInput then
+			return nil
+		end
+		if inputObject then
+			local nextValue = updateValueFromInput(inputObject)
+			if nextValue ~= nil then
+				latestValueRef.current = nextValue
+			end
+		end
+		commitValue(latestValueRef.current)
+		disconnectDragging()
+	end, { commitValue, disconnectDragging, updateValueFromInput })
+	local startDrag = React.useCallback(function(inputObject)
+		if disabled or not isPointerStartInput(inputObject) then
+			return nil
+		end
+		activeDragInputRef.current = inputObject
+		local initialValue = updateValueFromInput(inputObject)
+		if initialValue ~= nil then
+			latestValueRef.current = initialValue
+		end
+		local _result = moveConnectionRef.current
+		if _result ~= nil then
+			_result:Disconnect()
+		end
+		local _result_1 = endConnectionRef.current
+		if _result_1 ~= nil then
+			_result_1:Disconnect()
+		end
+		moveConnectionRef.current = UserInputService.InputChanged:Connect(function(changedInput)
+			local activeDragInput = activeDragInputRef.current
+			if not activeDragInput then
+				return nil
+			end
+			if activeDragInput.UserInputType == Enum.UserInputType.Touch then
+				if changedInput.UserInputType ~= Enum.UserInputType.Touch or changedInput ~= activeDragInput then
+					return nil
+				end
+				local touchValue = updateValueFromInput(changedInput)
+				if touchValue ~= nil then
+					latestValueRef.current = touchValue
+				end
+				return nil
+			end
+			if changedInput.UserInputType ~= Enum.UserInputType.MouseMovement then
+				return nil
+			end
+			local mouseValue = updateValueFromInput(changedInput)
+			if mouseValue ~= nil then
+				latestValueRef.current = mouseValue
+			end
+		end)
+		endConnectionRef.current = UserInputService.InputEnded:Connect(function(endedInput)
+			local activeDragInput = activeDragInputRef.current
+			if not activeDragInput then
+				return nil
+			end
+			local endedTouch = activeDragInput.UserInputType == Enum.UserInputType.Touch and endedInput == activeDragInput
+			local endedMouse = activeDragInput.UserInputType == Enum.UserInputType.MouseButton1 and endedInput.UserInputType == Enum.UserInputType.MouseButton1
+			if not endedTouch and not endedMouse then
+				return nil
+			end
+			finishDrag(if endedTouch then endedInput else nil)
+		end)
+	end, { disabled, finishDrag, updateValueFromInput })
+	React.useEffect(function()
+		return function()
+			disconnectDragging()
+		end
+	end, { disconnectDragging })
+	local setTrackNode = React.useCallback(function(instance)
+		trackRef.current = toGuiObject(instance)
+	end, {})
+	local setThumbNode = React.useCallback(function(instance)
+		thumbRef.current = toGuiObject(instance)
+	end, {})
+	local contextValue = React.useMemo(function()
+		return {
+			value = value,
+			setValue = setValue,
+			commitValue = commitValue,
+			min = min,
+			max = max,
+			step = step,
+			orientation = orientation,
+			disabled = disabled,
+			setTrackNode = setTrackNode,
+			setThumbNode = setThumbNode,
+			startDrag = startDrag,
+		}
+	end, { commitValue, disabled, max, min, orientation, setThumbNode, setTrackNode, setValue, startDrag, step, value })
+	return React.createElement(SliderContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	SliderRoot = SliderRoot,
+}

package/out/Slider/SliderThumb.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { SliderThumbProps } from "./types";
+export declare function SliderThumb(props: SliderThumbProps): React.JSX.Element;

package/out/Slider/SliderThumb.luau

@@ -0,0 +1,81 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useSliderContext = TS.import(script, script.Parent, "context").useSliderContext
+local valueToPercent = TS.import(script, script.Parent, "internals", "math").valueToPercent
+local function isPointerStartInput(inputObject)
+	return inputObject.UserInputType == Enum.UserInputType.MouseButton1 or inputObject.UserInputType == Enum.UserInputType.Touch
+end
+local function SliderThumb(props)
+	local sliderContext = useSliderContext()
+	local percent = valueToPercent(sliderContext.value, sliderContext.min, sliderContext.max)
+	local position = if sliderContext.orientation == "horizontal" then UDim2.fromScale(percent, 0.5) else UDim2.fromScale(0.5, 1 - percent)
+	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
+		if isPointerStartInput(inputObject) then
+			sliderContext.startDrag(inputObject)
+			return nil
+		end
+		if sliderContext.disabled then
+			return nil
+		end
+		local keyCode = inputObject.KeyCode
+		local nextValue
+		local pageStep = sliderContext.step * 10
+		if keyCode == Enum.KeyCode.Home then
+			nextValue = sliderContext.min
+		elseif keyCode == Enum.KeyCode.End then
+			nextValue = sliderContext.max
+		elseif keyCode == Enum.KeyCode.PageUp then
+			nextValue = sliderContext.value + pageStep
+		elseif keyCode == Enum.KeyCode.PageDown then
+			nextValue = sliderContext.value - pageStep
+		elseif keyCode == Enum.KeyCode.Right or keyCode == Enum.KeyCode.Up then
+			nextValue = sliderContext.value + sliderContext.step
+		elseif keyCode == Enum.KeyCode.Left or keyCode == Enum.KeyCode.Down then
+			nextValue = sliderContext.value - sliderContext.step
+		elseif keyCode == Enum.KeyCode.Return or keyCode == Enum.KeyCode.Space then
+			sliderContext.commitValue(sliderContext.value)
+			return nil
+		else
+			return nil
+		end
+		if nextValue == nil then
+			return nil
+		end
+		sliderContext.setValue(nextValue)
+		sliderContext.commitValue(nextValue)
+	end, { sliderContext })
+	local sharedProps = {
+		Active = not sliderContext.disabled,
+		AnchorPoint = Vector2.new(0.5, 0.5),
+		Name = "SliderThumb",
+		Position = position,
+		Selectable = not sliderContext.disabled,
+		Event = {
+			InputBegan = handleInputBegan,
+		},
+		ref = sliderContext.setThumbNode,
+	}
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SliderThumb] `asChild` requires a child element.")
+		end
+		local _attributes = table.clone(sharedProps)
+		setmetatable(_attributes, nil)
+		return React.createElement(Slot, _attributes, child)
+	end
+	local _attributes = table.clone(sharedProps)
+	setmetatable(_attributes, nil)
+	_attributes.AutoButtonColor = false
+	_attributes.BackgroundColor3 = Color3.fromRGB(235, 241, 250)
+	_attributes.BorderSizePixel = 0
+	_attributes.Size = UDim2.fromOffset(16, 16)
+	_attributes.Text = ""
+	return React.createElement("textbutton", _attributes, props.children)
+end
+return {
+	SliderThumb = SliderThumb,
+}

package/out/Slider/SliderTrack.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { SliderTrackProps } from "./types";
+export declare function SliderTrack(props: SliderTrackProps): React.JSX.Element;

package/out/Slider/SliderTrack.luau

@@ -0,0 +1,45 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useSliderContext = TS.import(script, script.Parent, "context").useSliderContext
+local function isPointerStartInput(inputObject)
+	return inputObject.UserInputType == Enum.UserInputType.MouseButton1 or inputObject.UserInputType == Enum.UserInputType.Touch
+end
+local function SliderTrack(props)
+	local sliderContext = useSliderContext()
+	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
+		if not isPointerStartInput(inputObject) then
+			return nil
+		end
+		sliderContext.startDrag(inputObject)
+	end, { sliderContext })
+	local sharedProps = {
+		Active = not sliderContext.disabled,
+		Name = "SliderTrack",
+		Selectable = not sliderContext.disabled,
+		Event = {
+			InputBegan = handleInputBegan,
+		},
+		ref = sliderContext.setTrackNode,
+	}
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SliderTrack] `asChild` requires a child element.")
+		end
+		local _attributes = table.clone(sharedProps)
+		setmetatable(_attributes, nil)
+		return React.createElement(Slot, _attributes, child)
+	end
+	local _attributes = table.clone(sharedProps)
+	setmetatable(_attributes, nil)
+	_attributes.BackgroundColor3 = Color3.fromRGB(47, 53, 68)
+	_attributes.BorderSizePixel = 0
+	_attributes.Size = if sliderContext.orientation == "horizontal" then UDim2.fromOffset(260, 10) else UDim2.fromOffset(10, 220)
+	return React.createElement("frame", _attributes, props.children)
+end
+return {
+	SliderTrack = SliderTrack,
+}

package/out/Slider/context.d.ts

@@ -0,0 +1,3 @@
+import type { SliderContextValue } from "./types";
+declare const SliderContextProvider: import("@rbxts/react").Provider<SliderContextValue | undefined>, useSliderContext: () => SliderContextValue;
+export { SliderContextProvider, useSliderContext };

package/out/Slider/context.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createStrictContext = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).createStrictContext
+local _binding = createStrictContext("Slider")
+local SliderContextProvider = _binding[1]
+local useSliderContext = _binding[2]
+return {
+	SliderContextProvider = SliderContextProvider,
+	useSliderContext = useSliderContext,
+}

package/out/Slider/internals/math.d.ts

@@ -0,0 +1,12 @@
+import type { SliderOrientation } from "../types";
+export declare function clampNumber(value: number, min: number, max: number): number;
+export declare function normalizeBounds(min: number, max: number): {
+    min: number;
+    max: number;
+};
+export declare function normalizeStep(step: number): number;
+export declare function snapValueToStep(value: number, min: number, max: number, step: number): number;
+export declare function valueToPercent(value: number, min: number, max: number): number;
+export declare function percentToValue(percent: number, min: number, max: number, step: number): number;
+export declare function pointerPositionToPercent(pointerPosition: Vector2, trackPosition: Vector2, trackSize: Vector2, orientation: SliderOrientation): number;
+export declare function pointerPositionToValue(pointerPosition: Vector2, trackPosition: Vector2, trackSize: Vector2, min: number, max: number, step: number, orientation: SliderOrientation): number;

package/out/Slider/internals/math.luau

@@ -0,0 +1,64 @@
+-- Compiled with roblox-ts v3.0.0
+local function clampNumber(value, min, max)
+	return math.clamp(value, min, max)
+end
+local function normalizeBounds(min, max)
+	if min <= max then
+		return {
+			min = min,
+			max = max,
+		}
+	end
+	return {
+		min = max,
+		max = min,
+	}
+end
+local function normalizeStep(step)
+	return if step > 0 then step else 1
+end
+local function snapValueToStep(value, min, max, step)
+	local clamped = clampNumber(value, min, max)
+	local stepCount = math.round((clamped - min) / step)
+	local snapped = min + stepCount * step
+	return clampNumber(snapped, min, max)
+end
+local function valueToPercent(value, min, max)
+	if max <= min then
+		return 0
+	end
+	return clampNumber((value - min) / (max - min), 0, 1)
+end
+local function percentToValue(percent, min, max, step)
+	local clampedPercent = clampNumber(percent, 0, 1)
+	local rawValue = min + (max - min) * clampedPercent
+	return snapValueToStep(rawValue, min, max, step)
+end
+local function pointerPositionToPercent(pointerPosition, trackPosition, trackSize, orientation)
+	if orientation == "horizontal" then
+		if trackSize.X <= 0 then
+			return 0
+		end
+		local percent = (pointerPosition.X - trackPosition.X) / trackSize.X
+		return clampNumber(percent, 0, 1)
+	end
+	if trackSize.Y <= 0 then
+		return 0
+	end
+	local percent = 1 - (pointerPosition.Y - trackPosition.Y) / trackSize.Y
+	return clampNumber(percent, 0, 1)
+end
+local function pointerPositionToValue(pointerPosition, trackPosition, trackSize, min, max, step, orientation)
+	local percent = pointerPositionToPercent(pointerPosition, trackPosition, trackSize, orientation)
+	return percentToValue(percent, min, max, step)
+end
+return {
+	clampNumber = clampNumber,
+	normalizeBounds = normalizeBounds,
+	normalizeStep = normalizeStep,
+	snapValueToStep = snapValueToStep,
+	valueToPercent = valueToPercent,
+	percentToValue = percentToValue,
+	pointerPositionToPercent = pointerPositionToPercent,
+	pointerPositionToValue = pointerPositionToValue,
+}

package/out/Slider/types.d.ts

@@ -0,0 +1,41 @@
+import type React from "@rbxts/react";
+export type SliderOrientation = "horizontal" | "vertical";
+export type SliderSetValue = (value: number) => void;
+export type SliderCommitValue = (value: number) => void;
+export type SliderContextValue = {
+    value: number;
+    setValue: SliderSetValue;
+    commitValue: SliderCommitValue;
+    min: number;
+    max: number;
+    step: number;
+    orientation: SliderOrientation;
+    disabled: boolean;
+    setTrackNode: (instance: Instance | undefined) => void;
+    setThumbNode: (instance: Instance | undefined) => void;
+    startDrag: (inputObject: InputObject) => void;
+};
+export type SliderProps = {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: SliderOrientation;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+export type SliderTrackProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type SliderRangeProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type SliderThumbProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};

package/out/Slider/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,11 @@
+import { SliderRange } from "./Slider/SliderRange";
+import { SliderRoot } from "./Slider/SliderRoot";
+import { SliderThumb } from "./Slider/SliderThumb";
+import { SliderTrack } from "./Slider/SliderTrack";
+export declare const Slider: {
+    readonly Root: typeof SliderRoot;
+    readonly Track: typeof SliderTrack;
+    readonly Range: typeof SliderRange;
+    readonly Thumb: typeof SliderThumb;
+};
+export type { SliderCommitValue, SliderContextValue, SliderOrientation, SliderProps, SliderRangeProps, SliderSetValue, SliderThumbProps, SliderTrackProps, } from "./Slider/types";

package/out/init.luau

@@ -0,0 +1,15 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local SliderRange = TS.import(script, script, "Slider", "SliderRange").SliderRange
+local SliderRoot = TS.import(script, script, "Slider", "SliderRoot").SliderRoot
+local SliderThumb = TS.import(script, script, "Slider", "SliderThumb").SliderThumb
+local SliderTrack = TS.import(script, script, "Slider", "SliderTrack").SliderTrack
+local Slider = {
+	Root = SliderRoot,
+	Track = SliderTrack,
+	Range = SliderRange,
+	Thumb = SliderThumb,
+}
+return {
+	Slider = Slider,
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@lattice-ui/slider",
+  "version": "0.3.0",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.3.0",
+    "@lattice-ui/focus": "0.3.0"
+  },
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
+  }
+}

package/src/Slider/SliderRange.tsx

@@ -0,0 +1,38 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useSliderContext } from "./context";
+import { valueToPercent } from "./internals/math";
+import type { SliderRangeProps } from "./types";
+
+export function SliderRange(props: SliderRangeProps) {
+  const sliderContext = useSliderContext();
+  const percent = valueToPercent(sliderContext.value, sliderContext.min, sliderContext.max);
+
+  const rangeSize =
+    sliderContext.orientation === "horizontal" ? UDim2.fromScale(percent, 1) : UDim2.fromScale(1, percent);
+  const rangePosition =
+    sliderContext.orientation === "horizontal" ? UDim2.fromScale(0, 0) : UDim2.fromScale(0, 1 - percent);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[SliderRange] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Name="SliderRange" Position={rangePosition} Size={rangeSize}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <frame
+      BackgroundColor3={Color3.fromRGB(86, 142, 255)}
+      BorderSizePixel={0}
+      Position={rangePosition}
+      Size={rangeSize}
+    >
+      {props.children}
+    </frame>
+  );
+}

package/src/Slider/SliderRoot.tsx

@@ -0,0 +1,228 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { SliderContextProvider } from "./context";
+import { normalizeBounds, normalizeStep, pointerPositionToValue, snapValueToStep } from "./internals/math";
+import type { SliderProps } from "./types";
+
+const UserInputService = game.GetService("UserInputService");
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+function isPointerStartInput(inputObject: InputObject) {
+  return (
+    inputObject.UserInputType === Enum.UserInputType.MouseButton1 ||
+    inputObject.UserInputType === Enum.UserInputType.Touch
+  );
+}
+
+export function SliderRoot(props: SliderProps) {
+  const bounds = normalizeBounds(props.min ?? 0, props.max ?? 100);
+  const min = bounds.min;
+  const max = bounds.max;
+  const step = normalizeStep(props.step ?? 1);
+  const orientation = props.orientation ?? "horizontal";
+  const disabled = props.disabled === true;
+
+  const defaultValue = snapValueToStep(props.defaultValue ?? min, min, max, step);
+
+  const [valueState, setValueState] = useControllableState<number>({
+    value: props.value,
+    defaultValue,
+    onChange: props.onValueChange,
+  });
+
+  const value = snapValueToStep(valueState, min, max, step);
+
+  const trackRef = React.useRef<GuiObject>();
+  const thumbRef = React.useRef<GuiObject>();
+  const latestValueRef = React.useRef(value);
+
+  React.useEffect(() => {
+    latestValueRef.current = value;
+  }, [value]);
+
+  const setValue = React.useCallback(
+    (nextValue: number) => {
+      if (disabled) {
+        return;
+      }
+
+      const normalizedValue = snapValueToStep(nextValue, min, max, step);
+      latestValueRef.current = normalizedValue;
+      setValueState(normalizedValue);
+    },
+    [disabled, max, min, setValueState, step],
+  );
+
+  const commitValue = React.useCallback(
+    (nextValue: number) => {
+      if (disabled) {
+        return;
+      }
+
+      const normalizedValue = snapValueToStep(nextValue, min, max, step);
+      props.onValueCommit?.(normalizedValue);
+    },
+    [disabled, max, min, props.onValueCommit, step],
+  );
+
+  const activeDragInputRef = React.useRef<InputObject>();
+  const moveConnectionRef = React.useRef<RBXScriptConnection>();
+  const endConnectionRef = React.useRef<RBXScriptConnection>();
+
+  const disconnectDragging = React.useCallback(() => {
+    moveConnectionRef.current?.Disconnect();
+    moveConnectionRef.current = undefined;
+
+    endConnectionRef.current?.Disconnect();
+    endConnectionRef.current = undefined;
+
+    activeDragInputRef.current = undefined;
+  }, []);
+
+  const updateValueFromInput = React.useCallback(
+    (inputObject: InputObject) => {
+      const trackNode = trackRef.current;
+      if (!trackNode) {
+        return undefined;
+      }
+
+      const pointerPosition = new Vector2(inputObject.Position.X, inputObject.Position.Y);
+      const nextValue = pointerPositionToValue(
+        pointerPosition,
+        trackNode.AbsolutePosition,
+        trackNode.AbsoluteSize,
+        min,
+        max,
+        step,
+        orientation,
+      );
+
+      setValue(nextValue);
+      return nextValue;
+    },
+    [max, min, orientation, setValue, step],
+  );
+
+  const finishDrag = React.useCallback(
+    (inputObject?: InputObject) => {
+      const activeDragInput = activeDragInputRef.current;
+      if (!activeDragInput) {
+        return;
+      }
+
+      if (inputObject) {
+        const nextValue = updateValueFromInput(inputObject);
+        if (nextValue !== undefined) {
+          latestValueRef.current = nextValue;
+        }
+      }
+
+      commitValue(latestValueRef.current);
+      disconnectDragging();
+    },
+    [commitValue, disconnectDragging, updateValueFromInput],
+  );
+
+  const startDrag = React.useCallback(
+    (inputObject: InputObject) => {
+      if (disabled || !isPointerStartInput(inputObject)) {
+        return;
+      }
+
+      activeDragInputRef.current = inputObject;
+      const initialValue = updateValueFromInput(inputObject);
+      if (initialValue !== undefined) {
+        latestValueRef.current = initialValue;
+      }
+
+      moveConnectionRef.current?.Disconnect();
+      endConnectionRef.current?.Disconnect();
+
+      moveConnectionRef.current = UserInputService.InputChanged.Connect((changedInput) => {
+        const activeDragInput = activeDragInputRef.current;
+        if (!activeDragInput) {
+          return;
+        }
+
+        if (activeDragInput.UserInputType === Enum.UserInputType.Touch) {
+          if (changedInput.UserInputType !== Enum.UserInputType.Touch || changedInput !== activeDragInput) {
+            return;
+          }
+
+          const touchValue = updateValueFromInput(changedInput);
+          if (touchValue !== undefined) {
+            latestValueRef.current = touchValue;
+          }
+          return;
+        }
+
+        if (changedInput.UserInputType !== Enum.UserInputType.MouseMovement) {
+          return;
+        }
+
+        const mouseValue = updateValueFromInput(changedInput);
+        if (mouseValue !== undefined) {
+          latestValueRef.current = mouseValue;
+        }
+      });
+
+      endConnectionRef.current = UserInputService.InputEnded.Connect((endedInput) => {
+        const activeDragInput = activeDragInputRef.current;
+        if (!activeDragInput) {
+          return;
+        }
+
+        const endedTouch = activeDragInput.UserInputType === Enum.UserInputType.Touch && endedInput === activeDragInput;
+        const endedMouse =
+          activeDragInput.UserInputType === Enum.UserInputType.MouseButton1 &&
+          endedInput.UserInputType === Enum.UserInputType.MouseButton1;
+
+        if (!endedTouch && !endedMouse) {
+          return;
+        }
+
+        finishDrag(endedTouch ? endedInput : undefined);
+      });
+    },
+    [disabled, finishDrag, updateValueFromInput],
+  );
+
+  React.useEffect(() => {
+    return () => {
+      disconnectDragging();
+    };
+  }, [disconnectDragging]);
+
+  const setTrackNode = React.useCallback((instance: Instance | undefined) => {
+    trackRef.current = toGuiObject(instance);
+  }, []);
+
+  const setThumbNode = React.useCallback((instance: Instance | undefined) => {
+    thumbRef.current = toGuiObject(instance);
+  }, []);
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      setValue,
+      commitValue,
+      min,
+      max,
+      step,
+      orientation,
+      disabled,
+      setTrackNode,
+      setThumbNode,
+      startDrag,
+    }),
+    [commitValue, disabled, max, min, orientation, setThumbNode, setTrackNode, setValue, startDrag, step, value],
+  );
+
+  return <SliderContextProvider value={contextValue}>{props.children}</SliderContextProvider>;
+}

package/src/Slider/SliderThumb.tsx

@@ -0,0 +1,97 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useSliderContext } from "./context";
+import { valueToPercent } from "./internals/math";
+import type { SliderThumbProps } from "./types";
+
+function isPointerStartInput(inputObject: InputObject) {
+  return (
+    inputObject.UserInputType === Enum.UserInputType.MouseButton1 ||
+    inputObject.UserInputType === Enum.UserInputType.Touch
+  );
+}
+
+export function SliderThumb(props: SliderThumbProps) {
+  const sliderContext = useSliderContext();
+  const percent = valueToPercent(sliderContext.value, sliderContext.min, sliderContext.max);
+
+  const position =
+    sliderContext.orientation === "horizontal" ? UDim2.fromScale(percent, 0.5) : UDim2.fromScale(0.5, 1 - percent);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: GuiObject, inputObject: InputObject) => {
+      if (isPointerStartInput(inputObject)) {
+        sliderContext.startDrag(inputObject);
+        return;
+      }
+
+      if (sliderContext.disabled) {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      let nextValue: number | undefined;
+      const pageStep = sliderContext.step * 10;
+
+      if (keyCode === Enum.KeyCode.Home) {
+        nextValue = sliderContext.min;
+      } else if (keyCode === Enum.KeyCode.End) {
+        nextValue = sliderContext.max;
+      } else if (keyCode === Enum.KeyCode.PageUp) {
+        nextValue = sliderContext.value + pageStep;
+      } else if (keyCode === Enum.KeyCode.PageDown) {
+        nextValue = sliderContext.value - pageStep;
+      } else if (keyCode === Enum.KeyCode.Right || keyCode === Enum.KeyCode.Up) {
+        nextValue = sliderContext.value + sliderContext.step;
+      } else if (keyCode === Enum.KeyCode.Left || keyCode === Enum.KeyCode.Down) {
+        nextValue = sliderContext.value - sliderContext.step;
+      } else if (keyCode === Enum.KeyCode.Return || keyCode === Enum.KeyCode.Space) {
+        sliderContext.commitValue(sliderContext.value);
+        return;
+      } else {
+        return;
+      }
+
+      if (nextValue === undefined) {
+        return;
+      }
+
+      sliderContext.setValue(nextValue);
+      sliderContext.commitValue(nextValue);
+    },
+    [sliderContext],
+  );
+
+  const sharedProps = {
+    Active: !sliderContext.disabled,
+    AnchorPoint: new Vector2(0.5, 0.5),
+    Name: "SliderThumb",
+    Position: position,
+    Selectable: !sliderContext.disabled,
+    Event: {
+      InputBegan: handleInputBegan,
+    },
+    ref: sliderContext.setThumbNode,
+  };
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[SliderThumb] `asChild` requires a child element.");
+    }
+
+    return <Slot {...sharedProps}>{child}</Slot>;
+  }
+
+  return (
+    <textbutton
+      {...sharedProps}
+      AutoButtonColor={false}
+      BackgroundColor3={Color3.fromRGB(235, 241, 250)}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(16, 16)}
+      Text=""
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Slider/SliderTrack.tsx

@@ -0,0 +1,55 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useSliderContext } from "./context";
+import type { SliderTrackProps } from "./types";
+
+function isPointerStartInput(inputObject: InputObject) {
+  return (
+    inputObject.UserInputType === Enum.UserInputType.MouseButton1 ||
+    inputObject.UserInputType === Enum.UserInputType.Touch
+  );
+}
+
+export function SliderTrack(props: SliderTrackProps) {
+  const sliderContext = useSliderContext();
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: GuiObject, inputObject: InputObject) => {
+      if (!isPointerStartInput(inputObject)) {
+        return;
+      }
+
+      sliderContext.startDrag(inputObject);
+    },
+    [sliderContext],
+  );
+
+  const sharedProps = {
+    Active: !sliderContext.disabled,
+    Name: "SliderTrack",
+    Selectable: !sliderContext.disabled,
+    Event: {
+      InputBegan: handleInputBegan,
+    },
+    ref: sliderContext.setTrackNode,
+  };
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[SliderTrack] `asChild` requires a child element.");
+    }
+
+    return <Slot {...sharedProps}>{child}</Slot>;
+  }
+
+  return (
+    <frame
+      {...sharedProps}
+      BackgroundColor3={Color3.fromRGB(47, 53, 68)}
+      BorderSizePixel={0}
+      Size={sliderContext.orientation === "horizontal" ? UDim2.fromOffset(260, 10) : UDim2.fromOffset(10, 220)}
+    >
+      {props.children}
+    </frame>
+  );
+}

package/src/Slider/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { SliderContextValue } from "./types";
+
+const [SliderContextProvider, useSliderContext] = createStrictContext<SliderContextValue>("Slider");
+
+export { SliderContextProvider, useSliderContext };

package/src/Slider/internals/math.ts

@@ -0,0 +1,80 @@
+import type { SliderOrientation } from "../types";
+
+export function clampNumber(value: number, min: number, max: number) {
+  return math.clamp(value, min, max);
+}
+
+export function normalizeBounds(min: number, max: number) {
+  if (min <= max) {
+    return {
+      min,
+      max,
+    };
+  }
+
+  return {
+    min: max,
+    max: min,
+  };
+}
+
+export function normalizeStep(step: number) {
+  return step > 0 ? step : 1;
+}
+
+export function snapValueToStep(value: number, min: number, max: number, step: number) {
+  const clamped = clampNumber(value, min, max);
+  const stepCount = math.round((clamped - min) / step);
+  const snapped = min + stepCount * step;
+  return clampNumber(snapped, min, max);
+}
+
+export function valueToPercent(value: number, min: number, max: number) {
+  if (max <= min) {
+    return 0;
+  }
+
+  return clampNumber((value - min) / (max - min), 0, 1);
+}
+
+export function percentToValue(percent: number, min: number, max: number, step: number) {
+  const clampedPercent = clampNumber(percent, 0, 1);
+  const rawValue = min + (max - min) * clampedPercent;
+  return snapValueToStep(rawValue, min, max, step);
+}
+
+export function pointerPositionToPercent(
+  pointerPosition: Vector2,
+  trackPosition: Vector2,
+  trackSize: Vector2,
+  orientation: SliderOrientation,
+) {
+  if (orientation === "horizontal") {
+    if (trackSize.X <= 0) {
+      return 0;
+    }
+
+    const percent = (pointerPosition.X - trackPosition.X) / trackSize.X;
+    return clampNumber(percent, 0, 1);
+  }
+
+  if (trackSize.Y <= 0) {
+    return 0;
+  }
+
+  const percent = 1 - (pointerPosition.Y - trackPosition.Y) / trackSize.Y;
+  return clampNumber(percent, 0, 1);
+}
+
+export function pointerPositionToValue(
+  pointerPosition: Vector2,
+  trackPosition: Vector2,
+  trackSize: Vector2,
+  min: number,
+  max: number,
+  step: number,
+  orientation: SliderOrientation,
+) {
+  const percent = pointerPositionToPercent(pointerPosition, trackPosition, trackSize, orientation);
+  return percentToValue(percent, min, max, step);
+}

package/src/Slider/types.ts

@@ -0,0 +1,48 @@
+import type React from "@rbxts/react";
+
+export type SliderOrientation = "horizontal" | "vertical";
+
+export type SliderSetValue = (value: number) => void;
+export type SliderCommitValue = (value: number) => void;
+
+export type SliderContextValue = {
+  value: number;
+  setValue: SliderSetValue;
+  commitValue: SliderCommitValue;
+  min: number;
+  max: number;
+  step: number;
+  orientation: SliderOrientation;
+  disabled: boolean;
+  setTrackNode: (instance: Instance | undefined) => void;
+  setThumbNode: (instance: Instance | undefined) => void;
+  startDrag: (inputObject: InputObject) => void;
+};
+
+export type SliderProps = {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  orientation?: SliderOrientation;
+  disabled?: boolean;
+  children?: React.ReactNode;
+};
+
+export type SliderTrackProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type SliderRangeProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type SliderThumbProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,22 @@
+import { SliderRange } from "./Slider/SliderRange";
+import { SliderRoot } from "./Slider/SliderRoot";
+import { SliderThumb } from "./Slider/SliderThumb";
+import { SliderTrack } from "./Slider/SliderTrack";
+
+export const Slider = {
+  Root: SliderRoot,
+  Track: SliderTrack,
+  Range: SliderRange,
+  Thumb: SliderThumb,
+} as const;
+
+export type {
+  SliderCommitValue,
+  SliderContextValue,
+  SliderOrientation,
+  SliderProps,
+  SliderRangeProps,
+  SliderSetValue,
+  SliderThumbProps,
+  SliderTrackProps,
+} from "./Slider/types";

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,35 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/accordion": ["accordion/src/index.ts"],
+      "@lattice-ui/avatar": ["avatar/src/index.ts"],
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/combobox": ["combobox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/progress": ["progress/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/scroll-area": ["scroll-area/src/index.ts"],
+      "@lattice-ui/select": ["select/src/index.ts"],
+      "@lattice-ui/slider": ["slider/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/text-field": ["text-field/src/index.ts"],
+      "@lattice-ui/textarea": ["textarea/src/index.ts"],
+      "@lattice-ui/toast": ["toast/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}