grassroot
Install

DocsAPI referenceHeadlessrange-slider

range-slider headless API

The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.

Machine API

@grassroot/ui-headless-core/range-slider

Core connector and vanilla API

13 exports
View source packages/ui-headless/core/src/range-slider/index.ts

connectRangeSlider

function
DeclarationView source
connectRangeSliderts
declare function connectRangeSlider(service: RangeSliderService, scope: PartScope, options?: RangeSliderConnectOptions): RangeSliderApi;
Name
Kind
Type
Requirement
service
parameter
RangeSliderService
required
scope
parameter
PartScope
required
options
parameter
RangeSliderConnectOptions
optional
return
return value
RangeSliderApi
n/a
Name
service
Kind
parameter
Type
RangeSliderService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
options
Kind
parameter
Type
RangeSliderConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
RangeSliderApi
Requirement
n/a

mountRangeSlider

function
DeclarationView source
mountRangeSliderts
declare function mountRangeSlider(container: HTMLElement, options?: MountRangeSliderOptions): RangeSliderMount;
Name
Kind
Type
Requirement
container
parameter
HTMLElement
required
options
parameter
MountRangeSliderOptions
optional
return
return value
RangeSliderMount
n/a
Name
container
Kind
parameter
Type
HTMLElement
Requirement
required
Name
options
Kind
parameter
Type
MountRangeSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
RangeSliderMount
Requirement
n/a

MountRangeSliderOptions

interface
DeclarationView source
MountRangeSliderOptionsts
interface MountRangeSliderOptions extends RangeSliderInput, Omit<RangeSliderConnectOptions, "histogram"> {
  readonly histogram?: readonly number[];
}
Name
Kind
Type
Requirement
histogram
property
readonly number[]
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional

rangeSliderAnatomy

value
DeclarationView source
rangeSliderAnatomyts
export declare const rangeSliderAnatomy: {
  readonly scope: "range-slider";
  readonly parts: readonly ["root", "histogram", "bar", "track", "fill", "handle", "readout", "value", "separator", "caption"];
};
Name
Kind
Type
Requirement
parts
property
readonly ["root", "histogram", "bar", "track", "fill", "handle", "readout", "value", "separator", "caption"]
required
scope
property
"range-slider"
required
Name
parts
Kind
property
Type
readonly ["root", "histogram", "bar", "track", "fill", "handle", "readout", "value", "separator", "caption"]
Requirement
required
Name
scope
Kind
property
Type
"range-slider"
Requirement
required

RangeSliderApi

interface
DeclarationView source
RangeSliderApits
interface RangeSliderApi {
  rootProps(): PartProps;
  histogramProps(): PartProps;
  barProps(index: number): PartProps;
  trackProps(): PartProps;
  fillProps(): PartProps;
  handleProps(handle: 0 | 1): PartProps;
  readoutProps(): PartProps;
  valueProps(): PartProps;
  separatorProps(): PartProps;
  captionProps(): PartProps;
  readonly value: RangeSliderPair;
  readonly min: number;
  readonly max: number;
  readonly step: number;
  readonly disabled: boolean;
  destroy(): void;
}
Name
Kind
Type
Requirement
barProps
method
(index: number) => PartProps
required
captionProps
method
() => PartProps
required
destroy
method
() => void
required
disabled
property
boolean
required
fillProps
method
() => PartProps
required
handleProps
method
(handle: 0 | 1) => PartProps
required
histogramProps
method
() => PartProps
required
max
property
number
required
min
property
number
required
readoutProps
method
() => PartProps
required
rootProps
method
() => PartProps
required
separatorProps
method
() => PartProps
required
step
property
number
required
trackProps
method
() => PartProps
required
Name
barProps
Kind
method
Type
(index: number) => PartProps
Requirement
required
Name
captionProps
Kind
method
Type
() => PartProps
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
disabled
Kind
property
Type
boolean
Requirement
required
Name
fillProps
Kind
method
Type
() => PartProps
Requirement
required
Name
handleProps
Kind
method
Type
(handle: 0 | 1) => PartProps
Requirement
required
Name
histogramProps
Kind
method
Type
() => PartProps
Requirement
required
Name
max
Kind
property
Type
number
Requirement
required
Name
min
Kind
property
Type
number
Requirement
required
Name
readoutProps
Kind
method
Type
() => PartProps
Requirement
required
Name
rootProps
Kind
method
Type
() => PartProps
Requirement
required
Name
separatorProps
Kind
method
Type
() => PartProps
Requirement
required
Name
step
Kind
property
Type
number
Requirement
required
Name
trackProps
Kind
method
Type
() => PartProps
Requirement
required
Name
value
Kind
property
Type
RangeSliderPair
Requirement
required
Name
valueProps
Kind
method
Type
() => PartProps
Requirement
required

RangeSliderChangeDetail

interface
DeclarationView source
RangeSliderChangeDetailts
interface RangeSliderChangeDetail {
  readonly value: RangeSliderPair;
  readonly reason: RangeSliderReason;
}
Name
Kind
Type
Requirement
reason
property
RangeSliderReason
required
value
property
RangeSliderPair
required
Name
reason
Kind
property
Type
RangeSliderReason
Requirement
required
Name
value
Kind
property
Type
RangeSliderPair
Requirement
required

RangeSliderConnectOptions

interface
DeclarationView source
RangeSliderConnectOptionsts
interface RangeSliderConnectOptions {
  readonly ariaLabel?: string;
  readonly messages?: Partial<RangeSliderMessages>;
  readonly histogram?: readonly number[];
  readonly format?: (value: number) => string;
  readonly caption?: string;
  readonly onValueChange?: (detail: RangeSliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
caption
property
string
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
messages
property
Partial<RangeSliderMessages>
optional
onValueChange
property
(detail: RangeSliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
caption
Kind
property
Type
string
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
messages
Kind
property
Type
Partial<RangeSliderMessages>
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: RangeSliderChangeDetail) => void
Requirement
optional

rangeSliderMessages

value
DeclarationView source
rangeSliderMessagests
export declare const rangeSliderMessages: RangeSliderMessages;

RangeSliderMessages

type
DeclarationView source
RangeSliderMessagests
type RangeSliderMessages = Pick<MessageTable, "rootLabel" | "minimumHandleLabel" | "maximumHandleLabel">;

RangeSliderMount

interface
DeclarationView source
RangeSliderMountts
interface RangeSliderMount {
  readonly service: RangeSliderService;
  readonly connector: RangeSliderApi;
  readonly root: HTMLElement;
  destroy(): void;
}
Name
Kind
Type
Requirement
connector
property
RangeSliderApi
required
destroy
method
() => void
required
root
property
HTMLElement
required
service
property
RangeSliderService
required
Name
connector
Kind
property
Type
RangeSliderApi
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
root
Kind
property
Type
HTMLElement
Requirement
required
Name
service
Kind
property
Type
RangeSliderService
Requirement
required

RangeSliderPart

type
DeclarationView source
RangeSliderPartts
type RangeSliderPart = (typeof rangeSliderAnatomy.parts)[number];

RangeSliderService

type
DeclarationView source
RangeSliderServicets
type RangeSliderService = Service<RangeSliderInput, "ready", RangeSliderContext, RangeSliderEvent, RangeSliderCommand>;

runRangeSliderCommand

function
DeclarationView source
runRangeSliderCommandts
declare function runRangeSliderCommand(command: RangeSliderCommand, options?: RangeSliderConnectOptions): void;
Name
Kind
Type
Requirement
command
parameter
RangeSliderCommand
required
options
parameter
RangeSliderConnectOptions
optional
return
return value
void
n/a
Name
command
Kind
parameter
Type
RangeSliderCommand
Requirement
required
Name
options
Kind
parameter
Type
RangeSliderConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
void
Requirement
n/a

Framework adapters

Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.

React example follows below.

React imports

@grassroot/ui-headless-react/range-sliderts
import { Root, RootProvider } from "@grassroot/ui-headless-react/range-slider";

Vue imports

@grassroot/ui-headless-vue/range-sliderts
<script setup lang="ts">
import { Root, RootProvider } from "@grassroot/ui-headless-vue/range-slider";
</script>

Angular imports

@grassroot/ui-headless-angular/range-sliderts
import { GrRangeSliderRoot, GrRangeSliderRootProvider } from "@grassroot/ui-headless-angular/range-slider";

Svelte imports

@grassroot/ui-headless-svelte/range-sliderts
<script lang="ts">
  import { Root } from "@grassroot/ui-headless-svelte/range-slider";
</script>

Solid imports

@grassroot/ui-headless-solid/range-sliderts
import { Root, RootProvider } from "@grassroot/ui-headless-solid/range-slider";

@grassroot/ui-headless-react/range-slider

React adapter

7 exports
View source packages/ui-headless/react/src/range-slider/index.ts

RangeSliderRootProps

interface
DeclarationView source
RangeSliderRootPropsts
interface RangeSliderRootProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange">, RangeSliderInput {
  readonly id?: string;
  readonly ariaLabel?: string;
  readonly histogram?: readonly number[];
  readonly format?: (value: number) => string;
  readonly caption?: string;
  readonly onValueChange?: (detail: {
    value: readonly [number, number];
    reason: string;
  }) => void;
  readonly children?: ReactNode;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
caption
property
string
optional
children
property
ReactNode
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
id
property
string
optional
onValueChange
property
(detail: { value: readonly [number, number]; reason: string; }) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
caption
Kind
property
Type
string
Requirement
optional
Name
children
Kind
property
Type
ReactNode
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: { value: readonly [number, number]; reason: string; }) => void
Requirement
optional

RangeSliderRootProviderProps

interface
DeclarationView source
RangeSliderRootProviderPropsts
interface RangeSliderRootProviderProps extends HTMLAttributes<HTMLDivElement> {
  readonly value: UseRangeSliderResult;
  readonly histogram?: readonly number[];
  readonly format?: (value: number) => string;
  readonly caption?: string;
  readonly children?: ReactNode;
}
Name
Kind
Type
Requirement
caption
property
string
optional
children
property
ReactNode
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
value
property
UseRangeSliderResult
required
Name
caption
Kind
property
Type
string
Requirement
optional
Name
children
Kind
property
Type
ReactNode
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
value
Kind
property
Type
UseRangeSliderResult
Requirement
required

Root

value
DeclarationView source
Rootts
export declare const Root: import("react").ForwardRefExoticComponent<RangeSliderRootProps & import("react").RefAttributes<HTMLDivElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: import("react").ForwardRefExoticComponent<RangeSliderRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

useRangeSlider

function
DeclarationView source
useRangeSliderts
declare function useRangeSlider(input: RangeSliderInput, options?: UseRangeSliderOptions): UseRangeSliderResult;
Name
Kind
Type
Requirement
input
parameter
RangeSliderInput
required
options
parameter
UseRangeSliderOptions
optional
return
return value
UseRangeSliderResult
n/a
Name
input
Kind
parameter
Type
RangeSliderInput
Requirement
required
Name
options
Kind
parameter
Type
UseRangeSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
UseRangeSliderResult
Requirement
n/a

UseRangeSliderOptions

interface
DeclarationView source
UseRangeSliderOptionsts
interface UseRangeSliderOptions {
  readonly id?: string;
  readonly ariaLabel?: string;
  readonly histogram?: readonly number[];
  readonly format?: (value: number) => string;
  readonly caption?: string;
  readonly onValueChange?: (detail: RangeSliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
caption
property
string
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
id
property
string
optional
onValueChange
property
(detail: RangeSliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
caption
Kind
property
Type
string
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: RangeSliderChangeDetail) => void
Requirement
optional

UseRangeSliderResult

interface
DeclarationView source
UseRangeSliderResultts
interface UseRangeSliderResult {
  readonly service: RangeSliderService;
  readonly connector: RangeSliderApi;
  readonly scope: ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>;
  readonly snapshot: RangeSliderSnapshot;
}
Name
Kind
Type
Requirement
connector
property
RangeSliderApi
required
scope
property
ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>
required
service
property
RangeSliderService
required
snapshot
property
RangeSliderSnapshot
required
Name
connector
Kind
property
Type
RangeSliderApi
Requirement
required
Name
scope
Kind
property
Type
ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>
Requirement
required
Name
service
Kind
property
Type
RangeSliderService
Requirement
required
Name
snapshot
Kind
property
Type
RangeSliderSnapshot
Requirement
required

@grassroot/ui-headless-vue/range-slider

Vue adapter

5 exports
View source packages/ui-headless/vue/src/range-slider/index.ts

Root

value
DeclarationView source
Rootts
export declare const Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  min: NumberConstructor;
  max: NumberConstructor;
  step: NumberConstructor;
  value: {
    type: PropType<RangeSliderInput["value"]>;
    default: undefined;
  };
  defaultValue: {
    type: PropType<RangeSliderInput["defaultValue"]>;
    default: undefined;
  };
  disabled: BooleanConstructor;
  ariaLabel: StringConstructor;
  id: StringConstructor;
  histogram: {
    type: PropType<readonly number[]>;
    default: () => never[];
  };
  format: {
    type: PropType<(value: number) => string>;
    default: StringConstructor;
  };
  caption: StringConstructor;
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
  valueChange: (_detail: unknown) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  min: NumberConstructor;
  max: NumberConstructor;
  step: NumberConstructor;
  value: {
    type: PropType<RangeSliderInput["value"]>;
    default: undefined;
  };
  defaultValue: {
    type: PropType<RangeSliderInput["defaultValue"]>;
    default: undefined;
  };
  disabled: BooleanConstructor;
  ariaLabel: StringConstructor;
  id: StringConstructor;
  histogram: {
    type: PropType<readonly number[]>;
    default: () => never[];
  };
  format: {
    type: PropType<(value: number) => string>;
    default: StringConstructor;
  };
  caption: StringConstructor;
}>> & Readonly<{
  onValueChange?: ((_detail: unknown) => any) | undefined;
}>, {
  value: import("@grassroot/ui-machines/range-slider").RangeSliderPair | undefined;
  defaultValue: import("@grassroot/ui-machines/range-slider").RangeSliderPair | undefined;
  disabled: boolean;
  histogram: readonly number[];
  format: (value: number) => string;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  value: {
    type: PropType<UseRangeSliderResult>;
    required: true;
  };
  histogram: {
    type: PropType<readonly number[]>;
    default: () => never[];
  };
  format: {
    type: PropType<(value: number) => string>;
    default: StringConstructor;
  };
  caption: StringConstructor;
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  value: {
    type: PropType<UseRangeSliderResult>;
    required: true;
  };
  histogram: {
    type: PropType<readonly number[]>;
    default: () => never[];
  };
  format: {
    type: PropType<(value: number) => string>;
    default: StringConstructor;
  };
  caption: StringConstructor;
}>> & Readonly<{}>, {
  histogram: readonly number[];
  format: (value: number) => string;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

useRangeSlider

function
DeclarationView source
useRangeSliderts
declare function useRangeSlider(input: () => RangeSliderInput, options?: UseRangeSliderOptions): UseRangeSliderResult;
Name
Kind
Type
Requirement
input
parameter
() => RangeSliderInput
required
options
parameter
UseRangeSliderOptions
optional
return
return value
UseRangeSliderResult
n/a
Name
input
Kind
parameter
Type
() => RangeSliderInput
Requirement
required
Name
options
Kind
parameter
Type
UseRangeSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
UseRangeSliderResult
Requirement
n/a

UseRangeSliderOptions

interface
DeclarationView source
UseRangeSliderOptionsts
interface UseRangeSliderOptions {
  readonly id?: string;
  readonly ariaLabel?: string;
  readonly histogram?: readonly number[];
  readonly format?: (value: number) => string;
  readonly caption?: string;
  readonly onValueChange?: (detail: RangeSliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
caption
property
string
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
id
property
string
optional
onValueChange
property
(detail: RangeSliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
caption
Kind
property
Type
string
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: RangeSliderChangeDetail) => void
Requirement
optional

UseRangeSliderResult

interface
DeclarationView source
UseRangeSliderResultts
interface UseRangeSliderResult {
  readonly service: RangeSliderService;
  readonly connector: RangeSliderApi;
  readonly scope: PartScope;
  readonly snapshot: ShallowRef<RangeSliderSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
RangeSliderApi
required
scope
property
PartScope
required
service
property
RangeSliderService
required
snapshot
property
ShallowRef<RangeSliderSnapshot>
required
Name
connector
Kind
property
Type
RangeSliderApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
RangeSliderService
Requirement
required
Name
snapshot
Kind
property
Type
ShallowRef<RangeSliderSnapshot>
Requirement
required

@grassroot/ui-headless-angular/range-slider

Angular adapter

4 exports
View source packages/ui-headless/angular/src/range-slider/index.ts

createRangeSliderStore

function
DeclarationView source
createRangeSliderStorets
export declare function createRangeSliderStore(initial: RangeSliderInput, options?: RangeSliderOptions): RangeSliderStore;
Name
Kind
Type
Requirement
initial
parameter
RangeSliderInput
required
options
parameter
RangeSliderOptions
optional
return
return value
RangeSliderStore
n/a
Name
initial
Kind
parameter
Type
RangeSliderInput
Requirement
required
Name
options
Kind
parameter
Type
RangeSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
RangeSliderStore
Requirement
n/a

GrRangeSliderRoot

class
DeclarationView source
GrRangeSliderRootts
export declare class GrRangeSliderRoot implements OnDestroy {
    readonly min: import("@angular/core").InputSignal<number | undefined>;
    readonly max: import("@angular/core").InputSignal<number | undefined>;
    readonly step: import("@angular/core").InputSignal<number | undefined>;
    readonly value: import("@angular/core").InputSignal<import("@grassroot/ui-machines/range-slider").RangeSliderPair | undefined>;
    readonly defaultValue: import("@angular/core").InputSignal<import("@grassroot/ui-machines/range-slider").RangeSliderPair | undefined>;
    readonly disabled: import("@angular/core").InputSignal<boolean>;
    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
    readonly histogram: import("@angular/core").InputSignal<readonly number[]>;
    readonly format: import("@angular/core").InputSignal<(value: number) => string>;
    readonly caption: import("@angular/core").InputSignal<string | undefined>;
    readonly valueChange: import("@angular/core").OutputEmitterRef<RangeSliderChangeDetail>;
    readonly store: RangeSliderStore;
    private readonly host;
    private readonly consumer;
    private readonly parts;
    private last;
    constructor();
    private applyParts;
    private apply;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrRangeSliderRoot, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrRangeSliderRoot, "gr-range-slider-root", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "histogram": { "alias": "histogram"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
}
Name
Kind
Type
Requirement
apply
property
any
required
applyParts
property
any
required
ariaLabel
property
import("@angular/core").InputSignal<string | undefined>
required
caption
property
import("@angular/core").InputSignal<string | undefined>
required
consumer
property
any
required
defaultValue
property
import("@angular/core").InputSignal<import("@grassroot/ui-machines/range-slider").RangeSliderPair | undefined>
required
disabled
property
import("@angular/core").InputSignal<boolean>
required
format
property
import("@angular/core").InputSignal<(value: number) => string>
required
histogram
property
import("@angular/core").InputSignal<readonly number[]>
required
host
property
any
required
last
property
any
required
max
property
import("@angular/core").InputSignal<number | undefined>
required
min
property
import("@angular/core").InputSignal<number | undefined>
required
ngOnDestroy
method
() => void
required
Name
apply
Kind
property
Type
any
Requirement
required
Name
applyParts
Kind
property
Type
any
Requirement
required
Name
ariaLabel
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Name
caption
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Name
consumer
Kind
property
Type
any
Requirement
required
Name
defaultValue
Kind
property
Type
import("@angular/core").InputSignal<import("@grassroot/ui-machines/range-slider").RangeSliderPair | undefined>
Requirement
required
Name
disabled
Kind
property
Type
import("@angular/core").InputSignal<boolean>
Requirement
required
Name
format
Kind
property
Type
import("@angular/core").InputSignal<(value: number) => string>
Requirement
required
Name
histogram
Kind
property
Type
import("@angular/core").InputSignal<readonly number[]>
Requirement
required
Name
host
Kind
property
Type
any
Requirement
required
Name
last
Kind
property
Type
any
Requirement
required
Name
max
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
min
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrRangeSliderRoot, "gr-range-slider-root", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "histogram": { "alias": "histogram"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrRangeSliderRoot, never>
Requirement
required
Name
parts
Kind
property
Type
any
Requirement
required
Name
step
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
store
Kind
property
Type
RangeSliderStore
Requirement
required
Name
value
Kind
property
Type
import("@angular/core").InputSignal<import("@grassroot/ui-machines/range-slider").RangeSliderPair | undefined>
Requirement
required
Name
valueChange
Kind
property
Type
import("@angular/core").OutputEmitterRef<RangeSliderChangeDetail>
Requirement
required

GrRangeSliderRootProvider

class
DeclarationView source
GrRangeSliderRootProviderts
export declare class GrRangeSliderRootProvider implements OnDestroy {
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrRangeSliderRootProvider, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrRangeSliderRootProvider, "gr-range-slider-root-provider", never, {}, {}, never, ["*"], true, never>;
}
Name
Kind
Type
Requirement
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrRangeSliderRootProvider, "gr-range-slider-root-provider", never, {}, {}, never, ["*"], true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrRangeSliderRootProvider, never>
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrRangeSliderRootProvider, "gr-range-slider-root-provider", never, {}, {}, never, ["*"], true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrRangeSliderRootProvider, never>
Requirement
required

RangeSliderStore

interface
DeclarationView source
RangeSliderStorets
export interface RangeSliderStore {
    readonly service: RangeSliderService;
    readonly connector: RangeSliderApi;
    readonly scope: PartScope;
    readonly version: WritableSignal<number>;
    start(): void;
    stop(): void;
    sync(input: RangeSliderInput): void;
    syncOptions(options: Record<string, unknown>): void;
}
Name
Kind
Type
Requirement
connector
property
RangeSliderApi
required
scope
property
PartScope
required
service
property
RangeSliderService
required
start
method
() => void
required
stop
method
() => void
required
sync
method
(input: RangeSliderInput) => void
required
syncOptions
method
(options: Record<string, unknown>) => void
required
version
property
WritableSignal<number>
required
Name
connector
Kind
property
Type
RangeSliderApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
RangeSliderService
Requirement
required
Name
start
Kind
method
Type
() => void
Requirement
required
Name
stop
Kind
method
Type
() => void
Requirement
required
Name
sync
Kind
method
Type
(input: RangeSliderInput) => void
Requirement
required
Name
syncOptions
Kind
method
Type
(options: Record<string, unknown>) => void
Requirement
required
Name
version
Kind
property
Type
WritableSignal<number>
Requirement
required

@grassroot/ui-headless-svelte/range-slider

Svelte adapter

4 exports
View source packages/ui-headless/svelte/src/range-slider/index.ts

createRangeSlider

function
DeclarationView source
createRangeSliderts
export declare function createRangeSlider(input: () => RangeSliderInput, options?: UseRangeSliderOptions): UseRangeSliderResult;
Name
Kind
Type
Requirement
input
parameter
() => RangeSliderInput
required
options
parameter
UseRangeSliderOptions
optional
return
return value
UseRangeSliderResult
n/a
Name
input
Kind
parameter
Type
() => RangeSliderInput
Requirement
required
Name
options
Kind
parameter
Type
UseRangeSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
UseRangeSliderResult
Requirement
n/a

Root

value
DeclarationView source
Rootts
export declare const Root: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a

UseRangeSliderOptions

interface
DeclarationView source
UseRangeSliderOptionsts
export interface UseRangeSliderOptions {
    readonly id?: string;
    readonly ariaLabel?: string;
    readonly histogram?: readonly number[];
    readonly format?: (value: number) => string;
    readonly caption?: string;
    readonly onValueChange?: (detail: import("@grassroot/ui-headless-core/range-slider").RangeSliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
caption
property
string
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
id
property
string
optional
onValueChange
property
(detail: import("@grassroot/ui-headless-core/range-slider").RangeSliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
caption
Kind
property
Type
string
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: import("@grassroot/ui-headless-core/range-slider").RangeSliderChangeDetail) => void
Requirement
optional

UseRangeSliderResult

interface
DeclarationView source
UseRangeSliderResultts
export interface UseRangeSliderResult {
    readonly service: RangeSliderService;
    readonly connector: RangeSliderApi;
    readonly scope: ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>;
    readonly version: () => number;
}
Name
Kind
Type
Requirement
connector
property
RangeSliderApi
required
scope
property
ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>
required
service
property
RangeSliderService
required
version
property
() => number
required
Name
connector
Kind
property
Type
RangeSliderApi
Requirement
required
Name
scope
Kind
property
Type
ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>
Requirement
required
Name
service
Kind
property
Type
RangeSliderService
Requirement
required
Name
version
Kind
property
Type
() => number
Requirement
required

@grassroot/ui-headless-solid/range-slider

Solid adapter

7 exports
View source packages/ui-headless/solid/src/range-slider/index.ts

RangeSliderRootProps

interface
DeclarationView source
RangeSliderRootPropsts
export interface RangeSliderRootProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "value" | "defaultValue">, RangeSliderInput {
    readonly ariaLabel?: string;
    readonly id?: string;
    readonly histogram?: readonly number[];
    readonly format?: (value: number) => string;
    readonly caption?: string;
    readonly onValueChange?: (detail: RangeSliderChangeDetail) => void;
    readonly children?: JSX.Element;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
caption
property
string
optional
children
property
JSX.Element
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
id
property
string
optional
onValueChange
property
(detail: RangeSliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
caption
Kind
property
Type
string
Requirement
optional
Name
children
Kind
property
Type
JSX.Element
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: RangeSliderChangeDetail) => void
Requirement
optional

RangeSliderRootProviderProps

interface
DeclarationView source
RangeSliderRootProviderPropsts
export interface RangeSliderRootProviderProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> {
    readonly value: UseRangeSliderResult;
    readonly histogram?: readonly number[];
    readonly format?: (value: number) => string;
    readonly caption?: string;
    readonly children?: JSX.Element;
}
Name
Kind
Type
Requirement
caption
property
string
optional
children
property
JSX.Element
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
value
property
UseRangeSliderResult
required
Name
caption
Kind
property
Type
string
Requirement
optional
Name
children
Kind
property
Type
JSX.Element
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
value
Kind
property
Type
UseRangeSliderResult
Requirement
required

Root

function
DeclarationView source
Rootts
export declare function Root(props: RangeSliderRootProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
RangeSliderRootProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
RangeSliderRootProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

RootProvider

function
DeclarationView source
RootProviderts
export declare function RootProvider(props: RangeSliderRootProviderProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
RangeSliderRootProviderProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
RangeSliderRootProviderProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

useRangeSlider

function
DeclarationView source
useRangeSliderts
export declare function useRangeSlider(input: Accessor<RangeSliderInput>, options?: UseRangeSliderOptions): UseRangeSliderResult;
Name
Kind
Type
Requirement
input
parameter
Accessor<RangeSliderInput>
required
options
parameter
UseRangeSliderOptions
optional
return
return value
UseRangeSliderResult
n/a
Name
input
Kind
parameter
Type
Accessor<RangeSliderInput>
Requirement
required
Name
options
Kind
parameter
Type
UseRangeSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
UseRangeSliderResult
Requirement
n/a

UseRangeSliderOptions

interface
DeclarationView source
UseRangeSliderOptionsts
export interface UseRangeSliderOptions {
    readonly id?: string;
    readonly ariaLabel?: string;
    readonly histogram?: readonly number[];
    readonly format?: (value: number) => string;
    readonly caption?: string;
    readonly onValueChange?: (detail: RangeSliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
caption
property
string
optional
format
property
(value: number) => string
optional
histogram
property
readonly number[]
optional
id
property
string
optional
onValueChange
property
(detail: RangeSliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
caption
Kind
property
Type
string
Requirement
optional
Name
format
Kind
property
Type
(value: number) => string
Requirement
optional
Name
histogram
Kind
property
Type
readonly number[]
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: RangeSliderChangeDetail) => void
Requirement
optional

UseRangeSliderResult

interface
DeclarationView source
UseRangeSliderResultts
export interface UseRangeSliderResult {
    readonly service: RangeSliderService;
    readonly connector: RangeSliderApi;
    readonly scope: PartScope;
    readonly snapshot: Accessor<RangeSliderSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
RangeSliderApi
required
scope
property
PartScope
required
service
property
RangeSliderService
required
snapshot
property
Accessor<RangeSliderSnapshot>
required
Name
connector
Kind
property
Type
RangeSliderApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
RangeSliderService
Requirement
required
Name
snapshot
Kind
property
Type
Accessor<RangeSliderSnapshot>
Requirement
required