grassroot
Install

DocsAPI referenceHeadlessslider

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/slider

Core connector and vanilla API

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

connectSlider

function
DeclarationView source
connectSliderts
declare function connectSlider(service: SliderService, scope: PartScope, options?: SliderConnectOptions): SliderApi;
Name
Kind
Type
Requirement
service
parameter
SliderService
required
scope
parameter
PartScope
required
options
parameter
SliderConnectOptions
optional
return
return value
SliderApi
n/a
Name
service
Kind
parameter
Type
SliderService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
options
Kind
parameter
Type
SliderConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
SliderApi
Requirement
n/a

mountSlider

function
DeclarationView source
mountSliderts
declare function mountSlider(container: HTMLElement, options?: MountSliderOptions): SliderMount;
Name
Kind
Type
Requirement
container
parameter
HTMLElement
required
options
parameter
MountSliderOptions
optional
return
return value
SliderMount
n/a
Name
container
Kind
parameter
Type
HTMLElement
Requirement
required
Name
options
Kind
parameter
Type
MountSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
SliderMount
Requirement
n/a

MountSliderOptions

interface
DeclarationView source
MountSliderOptionsts
interface MountSliderOptions extends SliderInput, Pick<SliderConnectOptions, "ariaLabel" | "messages"> {
  readonly onValueChange?: (detail: SliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
onValueChange
property
(detail: SliderChangeDetail) => void
optional
Name
onValueChange
Kind
property
Type
(detail: SliderChangeDetail) => void
Requirement
optional

runSliderCommand

function
DeclarationView source
runSliderCommandts
declare function runSliderCommand(command: SliderCommand, options?: SliderConnectOptions): void;
Name
Kind
Type
Requirement
command
parameter
SliderCommand
required
options
parameter
SliderConnectOptions
optional
return
return value
void
n/a
Name
command
Kind
parameter
Type
SliderCommand
Requirement
required
Name
options
Kind
parameter
Type
SliderConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
void
Requirement
n/a

sliderAnatomy

value
DeclarationView source
sliderAnatomyts
export declare const sliderAnatomy: {
  readonly scope: "slider";
  readonly parts: readonly ["root"];
};
Name
Kind
Type
Requirement
parts
property
readonly ["root"]
required
scope
property
"slider"
required
Name
parts
Kind
property
Type
readonly ["root"]
Requirement
required
Name
scope
Kind
property
Type
"slider"
Requirement
required

SliderApi

interface
DeclarationView source
SliderApits
interface SliderApi {
  rootProps(): PartProps;
  syncNativeValue(): void;
  readonly value: number;
  readonly min: number;
  readonly max: number;
  readonly step: number;
  readonly disabled: boolean;
}
Name
Kind
Type
Requirement
disabled
property
boolean
required
max
property
number
required
min
property
number
required
rootProps
method
() => PartProps
required
step
property
number
required
syncNativeValue
method
() => void
required
value
property
number
required
Name
disabled
Kind
property
Type
boolean
Requirement
required
Name
max
Kind
property
Type
number
Requirement
required
Name
min
Kind
property
Type
number
Requirement
required
Name
rootProps
Kind
method
Type
() => PartProps
Requirement
required
Name
step
Kind
property
Type
number
Requirement
required
Name
syncNativeValue
Kind
method
Type
() => void
Requirement
required
Name
value
Kind
property
Type
number
Requirement
required

SliderChangeDetail

interface
DeclarationView source
SliderChangeDetailts
interface SliderChangeDetail {
  readonly value: number;
  readonly reason: SliderReason;
}
Name
Kind
Type
Requirement
reason
property
SliderReason
required
value
property
number
required
Name
reason
Kind
property
Type
SliderReason
Requirement
required
Name
value
Kind
property
Type
number
Requirement
required

SliderConnectOptions

interface
DeclarationView source
SliderConnectOptionsts
interface SliderConnectOptions {
  readonly ariaLabel?: string;
  readonly messages?: Partial<SliderMessages>;
  readonly onValueChange?: (detail: SliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
messages
property
Partial<SliderMessages>
optional
onValueChange
property
(detail: SliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
messages
Kind
property
Type
Partial<SliderMessages>
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: SliderChangeDetail) => void
Requirement
optional

sliderMessages

value
DeclarationView source
sliderMessagests
export declare const sliderMessages: SliderMessages;

SliderMessages

type
DeclarationView source
SliderMessagests
type SliderMessages = Pick<MessageTable, "rootLabel">;

SliderMount

interface
DeclarationView source
SliderMountts
interface SliderMount {
  readonly service: SliderService;
  readonly connector: SliderApi;
  readonly root: HTMLInputElement;
  destroy(): void;
}
Name
Kind
Type
Requirement
connector
property
SliderApi
required
destroy
method
() => void
required
root
property
HTMLInputElement
required
service
property
SliderService
required
Name
connector
Kind
property
Type
SliderApi
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
root
Kind
property
Type
HTMLInputElement
Requirement
required
Name
service
Kind
property
Type
SliderService
Requirement
required

SliderPart

type
DeclarationView source
SliderPartts
type SliderPart = (typeof sliderAnatomy.parts)[number];

SliderService

type
DeclarationView source
SliderServicets
type SliderService = Service<SliderInput, "ready", SliderContext, SliderEvent, SliderCommand>;

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/sliderts
import { Root, RootProvider } from "@grassroot/ui-headless-react/slider";

Vue imports

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

Angular imports

@grassroot/ui-headless-angular/sliderts
import { GrSliderRoot, GrSliderRootProvider } from "@grassroot/ui-headless-angular/slider";

Svelte imports

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

Solid imports

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

@grassroot/ui-headless-react/slider

React adapter

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

Root

value
DeclarationView source
Rootts
export declare const Root: import("react").ForwardRefExoticComponent<SliderRootProps & import("react").RefAttributes<HTMLInputElement>>;
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<SliderRootProviderProps & import("react").RefAttributes<HTMLInputElement>>;
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

SliderRootProps

interface
DeclarationView source
SliderRootPropsts
interface SliderRootProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "type" | "min" | "max" | "step" | "disabled">, SliderInput {
  readonly ariaLabel?: string;
  readonly id?: string;
  readonly onValueChange?: (detail: SliderChangeDetail) => void;
  readonly children?: ReactNode;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
children
property
ReactNode
optional
id
property
string
optional
onValueChange
property
(detail: SliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
children
Kind
property
Type
ReactNode
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: SliderChangeDetail) => void
Requirement
optional

SliderRootProviderProps

interface
DeclarationView source
SliderRootProviderPropsts
interface SliderRootProviderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
  readonly value: UseSliderResult;
}
Name
Kind
Type
Requirement
value
property
UseSliderResult
required
Name
value
Kind
property
Type
UseSliderResult
Requirement
required

useSlider

function
DeclarationView source
useSliderts
declare function useSlider(input: SliderInput, options?: UseSliderOptions): UseSliderResult;
Name
Kind
Type
Requirement
input
parameter
SliderInput
required
options
parameter
UseSliderOptions
optional
return
return value
UseSliderResult
n/a
Name
input
Kind
parameter
Type
SliderInput
Requirement
required
Name
options
Kind
parameter
Type
UseSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
UseSliderResult
Requirement
n/a

UseSliderOptions

interface
DeclarationView source
UseSliderOptionsts
interface UseSliderOptions {
  readonly id?: string;
  readonly ariaLabel?: string;
  readonly onValueChange?: (detail: SliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
id
property
string
optional
onValueChange
property
(detail: SliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: SliderChangeDetail) => void
Requirement
optional

UseSliderResult

interface
DeclarationView source
UseSliderResultts
interface UseSliderResult {
  readonly service: SliderService;
  readonly connector: SliderApi;
  readonly snapshot: SliderSnapshot;
}
Name
Kind
Type
Requirement
connector
property
SliderApi
required
service
property
SliderService
required
snapshot
property
SliderSnapshot
required
Name
connector
Kind
property
Type
SliderApi
Requirement
required
Name
service
Kind
property
Type
SliderService
Requirement
required
Name
snapshot
Kind
property
Type
SliderSnapshot
Requirement
required

@grassroot/ui-headless-vue/slider

Vue adapter

4 exports
View source packages/ui-headless/vue/src/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: PropType<number | undefined>;
  defaultValue: PropType<number | undefined>;
  disabled: BooleanConstructor;
  ariaLabel: StringConstructor;
  id: StringConstructor;
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
  valueChange: (_detail: SliderChangeDetail) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  min: NumberConstructor;
  max: NumberConstructor;
  step: NumberConstructor;
  value: PropType<number | undefined>;
  defaultValue: PropType<number | undefined>;
  disabled: BooleanConstructor;
  ariaLabel: StringConstructor;
  id: StringConstructor;
}>> & Readonly<{
  onValueChange?: ((_detail: SliderChangeDetail) => any) | undefined;
}>, {
  disabled: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  value: {
    type: PropType<ReturnType<typeof useSlider>>;
    required: true;
  };
}>, () => 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<ReturnType<typeof useSlider>>;
    required: true;
  };
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

useSlider

function
DeclarationView source
useSliderts
declare function useSlider(input: () => SliderInput, options?: () => SliderOptions): UseSliderResult;
Name
Kind
Type
Requirement
input
parameter
() => SliderInput
required
options
parameter
() => SliderOptions
optional
return
return value
UseSliderResult
n/a
Name
input
Kind
parameter
Type
() => SliderInput
Requirement
required
Name
options
Kind
parameter
Type
() => SliderOptions
Requirement
optional
Name
return
Kind
return value
Type
UseSliderResult
Requirement
n/a

UseSliderResult

interface
DeclarationView source
UseSliderResultts
interface UseSliderResult {
  readonly service: SliderService;
  readonly connector: SliderApi;
  readonly snapshot: ShallowRef<SliderSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
SliderApi
required
service
property
SliderService
required
snapshot
property
ShallowRef<SliderSnapshot>
required
Name
connector
Kind
property
Type
SliderApi
Requirement
required
Name
service
Kind
property
Type
SliderService
Requirement
required
Name
snapshot
Kind
property
Type
ShallowRef<SliderSnapshot>
Requirement
required

@grassroot/ui-headless-angular/slider

Angular adapter

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

createSliderStore

function
DeclarationView source
createSliderStorets
export declare function createSliderStore(initial: SliderInput, options?: SliderOptions): SliderStore;
Name
Kind
Type
Requirement
initial
parameter
SliderInput
required
options
parameter
SliderOptions
optional
return
return value
SliderStore
n/a
Name
initial
Kind
parameter
Type
SliderInput
Requirement
required
Name
options
Kind
parameter
Type
SliderOptions
Requirement
optional
Name
return
Kind
return value
Type
SliderStore
Requirement
n/a

GrSliderRoot

class
DeclarationView source
GrSliderRootts
export declare class GrSliderRoot 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<number | undefined>;
    readonly defaultValue: import("@angular/core").InputSignal<number | undefined>;
    readonly disabled: import("@angular/core").InputSignal<boolean>;
    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
    readonly className: import("@angular/core").InputSignal<string | undefined>;
    readonly valueChange: import("@angular/core").OutputEmitterRef<SliderChangeDetail>;
    readonly store: SliderStore;
    private readonly host;
    private readonly listeners;
    private readonly consumer;
    private last;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSliderRoot, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrSliderRoot, "gr-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; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
}
Name
Kind
Type
Requirement
ariaLabel
property
import("@angular/core").InputSignal<string | undefined>
required
className
property
import("@angular/core").InputSignal<string | undefined>
required
consumer
property
any
required
defaultValue
property
import("@angular/core").InputSignal<number | undefined>
required
disabled
property
import("@angular/core").InputSignal<boolean>
required
host
property
any
required
last
property
any
required
listeners
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
ɵcmp
property
i0.ɵɵComponentDeclaration<GrSliderRoot, "gr-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; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSliderRoot, never>
required
step
property
import("@angular/core").InputSignal<number | undefined>
required
Name
ariaLabel
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Name
className
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<number | undefined>
Requirement
required
Name
disabled
Kind
property
Type
import("@angular/core").InputSignal<boolean>
Requirement
required
Name
host
Kind
property
Type
any
Requirement
required
Name
last
Kind
property
Type
any
Requirement
required
Name
listeners
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<GrSliderRoot, "gr-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; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSliderRoot, never>
Requirement
required
Name
step
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
store
Kind
property
Type
SliderStore
Requirement
required
Name
value
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
valueChange
Kind
property
Type
import("@angular/core").OutputEmitterRef<SliderChangeDetail>
Requirement
required

GrSliderRootProvider

class
DeclarationView source
GrSliderRootProviderts
export declare class GrSliderRootProvider implements OnDestroy {
    private readonly store;
    private readonly host;
    private readonly listeners;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrSliderRootProvider, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrSliderRootProvider, "gr-slider-root-provider", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
host
property
any
required
listeners
property
any
required
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrSliderRootProvider, "gr-slider-root-provider", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSliderRootProvider, never>
required
store
property
any
required
Name
host
Kind
property
Type
any
Requirement
required
Name
listeners
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrSliderRootProvider, "gr-slider-root-provider", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSliderRootProvider, never>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required

SliderStore

interface
DeclarationView source
SliderStorets
export interface SliderStore {
    readonly service: SliderService;
    readonly connector: SliderApi;
    readonly scope: PartScope;
    readonly version: WritableSignal<number>;
    start(): void;
    stop(): void;
    sync(input: Record<string, unknown>): void;
    syncOptions(options: Record<string, unknown>): void;
}
Name
Kind
Type
Requirement
connector
property
SliderApi
required
scope
property
PartScope
required
service
property
SliderService
required
start
method
() => void
required
stop
method
() => void
required
sync
method
(input: Record<string, unknown>) => void
required
syncOptions
method
(options: Record<string, unknown>) => void
required
version
property
WritableSignal<number>
required
Name
connector
Kind
property
Type
SliderApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
SliderService
Requirement
required
Name
start
Kind
method
Type
() => void
Requirement
required
Name
stop
Kind
method
Type
() => void
Requirement
required
Name
sync
Kind
method
Type
(input: Record<string, unknown>) => 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/slider

Svelte adapter

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

createSlider

function
DeclarationView source
createSliderts
export declare function createSlider(input: () => SliderInput, options?: UseSliderOptions): UseSliderResult;
Name
Kind
Type
Requirement
input
parameter
() => SliderInput
required
options
parameter
UseSliderOptions
optional
return
return value
UseSliderResult
n/a
Name
input
Kind
parameter
Type
() => SliderInput
Requirement
required
Name
options
Kind
parameter
Type
UseSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
UseSliderResult
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

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: 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

UseSliderOptions

interface
DeclarationView source
UseSliderOptionsts
export interface UseSliderOptions {
    readonly id?: string;
    readonly ariaLabel?: string;
    readonly onValueChange?: (detail: SliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
id
property
string
optional
onValueChange
property
(detail: SliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: SliderChangeDetail) => void
Requirement
optional

UseSliderResult

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

@grassroot/ui-headless-solid/slider

Solid adapter

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

Root

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

RootProvider

function
DeclarationView source
RootProviderts
export declare function RootProvider(props: {
    value: UseSliderResult;
} & JSX.InputHTMLAttributes<HTMLInputElement>): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
{ value: UseSliderResult; } & JSX.InputHTMLAttributes<HTMLInputElement>
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
{ value: UseSliderResult; } & JSX.InputHTMLAttributes<HTMLInputElement>
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

SliderRootProps

interface
DeclarationView source
SliderRootPropsts
export interface SliderRootProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "min" | "max" | "step" | "disabled">, SliderInput {
    readonly ariaLabel?: string;
    readonly id?: string;
    readonly onValueChange?: (detail: SliderChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
id
property
string
optional
onValueChange
property
(detail: SliderChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: SliderChangeDetail) => void
Requirement
optional

useSlider

function
DeclarationView source
useSliderts
export declare function useSlider(input: () => SliderInput, options?: UseSliderOptions): UseSliderResult;
Name
Kind
Type
Requirement
input
parameter
() => SliderInput
required
options
parameter
UseSliderOptions
optional
return
return value
UseSliderResult
n/a
Name
input
Kind
parameter
Type
() => SliderInput
Requirement
required
Name
options
Kind
parameter
Type
UseSliderOptions
Requirement
optional
Name
return
Kind
return value
Type
UseSliderResult
Requirement
n/a

UseSliderResult

interface
DeclarationView source
UseSliderResultts
export interface UseSliderResult {
    readonly service: SliderService;
    readonly connector: SliderApi;
    readonly snapshot: Accessor<number>;
}
Name
Kind
Type
Requirement
connector
property
SliderApi
required
service
property
SliderService
required
snapshot
property
Accessor<number>
required
Name
connector
Kind
property
Type
SliderApi
Requirement
required
Name
service
Kind
property
Type
SliderService
Requirement
required
Name
snapshot
Kind
property
Type
Accessor<number>
Requirement
required