grassroot
Install

DocsAPI referenceUI machinesrange-slider

range-slider machine

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

@grassroot/ui-machines/range-slider

Package

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

Service example

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

Exports

RangeSliderCommand

type
DeclarationView source
RangeSliderCommandts
type RangeSliderCommand = CommandObject & {
  readonly type: "VALUE_CHANGE_REQUEST";
  readonly value: RangeSliderPair;
  readonly reason: RangeSliderReason;
};
Name
Kind
Type
Requirement
reason
property
RangeSliderReason
required
type
property
string
required
value
property
RangeSliderPair
required
Name
reason
Kind
property
Type
RangeSliderReason
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required
Name
value
Kind
property
Type
RangeSliderPair
Requirement
required

RangeSliderContext

type
DeclarationView source
RangeSliderContextts
type RangeSliderContext = {
  readonly value: RangeSliderPair;
  readonly mode: BindingMode;
};
Name
Kind
Type
Requirement
mode
property
BindingMode
required
value
property
RangeSliderPair
required
Name
mode
Kind
property
Type
BindingMode
Requirement
required
Name
value
Kind
property
Type
RangeSliderPair
Requirement
required

RangeSliderDiagnosticCodes

value
DeclarationView source
RangeSliderDiagnosticCodests
export declare const RangeSliderDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

RangeSliderEvent

type
DeclarationView source
RangeSliderEventts
type RangeSliderEvent = {
  readonly type: "SET";
  readonly handle: 0 | 1;
  readonly value: number;
  readonly reason: RangeSliderReason;
} | {
  readonly type: "RESET";
};

RangeSliderInput

type
DeclarationView source
RangeSliderInputts
type RangeSliderInput = {
  readonly min?: number;
  readonly max?: number;
  readonly step?: number;
  readonly value?: RangeSliderPair;
  readonly defaultValue?: RangeSliderPair;
  readonly disabled?: boolean;
};
Name
Kind
Type
Requirement
defaultValue
property
RangeSliderPair
optional
disabled
property
boolean
optional
max
property
number
optional
min
property
number
optional
step
property
number
optional
value
property
RangeSliderPair
optional
Name
defaultValue
Kind
property
Type
RangeSliderPair
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
RangeSliderPair
Requirement
optional

rangeSliderMachine

value
DeclarationView source
rangeSliderMachinets
export declare const rangeSliderMachine: Machine<RangeSliderInput, "ready", RangeSliderContext, RangeSliderEvent, RangeSliderCommand>;

RangeSliderPair

type
DeclarationView source
RangeSliderPairts
type RangeSliderPair = readonly [number, number];

RangeSliderReason

type
DeclarationView source
RangeSliderReasonts
type RangeSliderReason = "pointer" | "keyboard" | "programmatic";

rangeSliderReplaySequence

value
DeclarationView source
rangeSliderReplaySequencets
export declare const rangeSliderReplaySequence: readonly RangeSliderEvent[];

rangeSliderSelectors

value
DeclarationView source
rangeSliderSelectorsts
export declare const rangeSliderSelectors: {
  value: (snapshot: RangeSliderSnapshot) => RangeSliderPair;
};
Name
Kind
Type
Requirement
value
property
(snapshot: RangeSliderSnapshot) => RangeSliderPair
required
Name
value
Kind
property
Type
(snapshot: RangeSliderSnapshot) => RangeSliderPair
Requirement
required

RangeSliderSnapshot

type
DeclarationView source
RangeSliderSnapshotts
type RangeSliderSnapshot = Snapshot<"ready", RangeSliderContext>;