grassroot
Install

DocsAPI referenceUI machinesslider

slider machine

The public state machine contract for @grassroot/ui-machines/slider. The machine owns behaviour; the matching headless layer owns composition.

@grassroot/ui-machines/slider

Package

10 exports
View source packages/ui-machines/src/slider/index.ts

Service example

slider.tsts
import { createService } from "@grassroot/statechart";
import { sliderMachine } from "@grassroot/ui-machines/slider";
 
const service = createService(sliderMachine, { input: {} });
service.start();
service.send({ type: "…" });
service.stop();

Exports

SliderCommand

type
DeclarationView source
SliderCommandts
type SliderCommand = CommandObject & {
  readonly type: "VALUE_CHANGE_REQUEST";
  readonly value: number;
  readonly reason: SliderReason;
};
Name
Kind
Type
Requirement
reason
property
SliderReason
required
type
property
string
required
value
property
number
required
Name
reason
Kind
property
Type
SliderReason
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required
Name
value
Kind
property
Type
number
Requirement
required

SliderContext

type
DeclarationView source
SliderContextts
type SliderContext = {
  readonly value: number;
  readonly mode: BindingMode;
};
Name
Kind
Type
Requirement
mode
property
BindingMode
required
value
property
number
required
Name
mode
Kind
property
Type
BindingMode
Requirement
required
Name
value
Kind
property
Type
number
Requirement
required

SliderDiagnosticCodes

value
DeclarationView source
SliderDiagnosticCodests
export declare const SliderDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

SliderEvent

type
DeclarationView source
SliderEventts
type SliderEvent = {
  readonly type: "SET";
  readonly value: number;
  readonly reason: SliderReason;
} | {
  readonly type: "RESET";
};

SliderInput

type
DeclarationView source
SliderInputts
type SliderInput = {
  readonly min?: number;
  readonly max?: number;
  readonly step?: number;
  readonly value?: number;
  readonly defaultValue?: number;
  readonly disabled?: boolean;
};
Name
Kind
Type
Requirement
defaultValue
property
number
optional
disabled
property
boolean
optional
max
property
number
optional
min
property
number
optional
step
property
number
optional
value
property
number
optional
Name
defaultValue
Kind
property
Type
number
Requirement
optional
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Name
max
Kind
property
Type
number
Requirement
optional
Name
min
Kind
property
Type
number
Requirement
optional
Name
step
Kind
property
Type
number
Requirement
optional
Name
value
Kind
property
Type
number
Requirement
optional

sliderMachine

value
DeclarationView source
sliderMachinets
export declare const sliderMachine: Machine<SliderInput, "ready", SliderContext, SliderEvent, SliderCommand>;

SliderReason

type
DeclarationView source
SliderReasonts
type SliderReason = "pointer" | "keyboard" | "programmatic";

sliderReplaySequence

value
DeclarationView source
sliderReplaySequencets
export declare const sliderReplaySequence: readonly SliderEvent[];

sliderSelectors

value
DeclarationView source
sliderSelectorsts
export declare const sliderSelectors: {
  value: (snapshot: SliderSnapshot) => number;
  min: (input: SliderInput) => number;
  max: (input: SliderInput) => number;
};
Name
Kind
Type
Requirement
max
property
(input: SliderInput) => number
required
min
property
(input: SliderInput) => number
required
value
property
(snapshot: SliderSnapshot) => number
required
Name
max
Kind
property
Type
(input: SliderInput) => number
Requirement
required
Name
min
Kind
property
Type
(input: SliderInput) => number
Requirement
required
Name
value
Kind
property
Type
(snapshot: SliderSnapshot) => number
Requirement
required

SliderSnapshot

type
DeclarationView source
SliderSnapshotts
type SliderSnapshot = Snapshot<"ready", SliderContext>;