Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface RangeSliderOptions

A data type that represents the configuration options for a range slider component.

Hierarchy

Index

Properties

Properties

Optional className

className: string

CSS class name to add to the view's element.

Optional count

count: number

Optional disabled

disabled: boolean

A Boolean indicating whether the control is enabled.

Optional dots

dots: boolean

A Boolean indicating whether dots should be rendered at each step.

Optional id

id: string

Unique identifier.

Optional marks

marks: {}

Labels to display along the slider, where the key is the value within the range and the value is the label string to display.

When used in conjunction with marksEvery, the marks defined using this property will always be rendered and will override the automatically generated values.

Type declaration

  • [key: string]: string

Optional marksEvery

marksEvery: number | string

Interval to automatically add step marks/labels for within the range.

If a number is provided, this interval will be based on the step count/index (e.g. render a mark every x steps). If you want to render a mark based on the actual value at each step, provide a string that is prefixed with a percent sign, which will render a mark when a step's value is divisible by the following number (e.g. % 12 will render a mark when a step's value is evenly divisible by 12).

Optional marksFormatter

marksFormatter: (value: number) => string

Type declaration

    • (value: number): string

    • Parameters

      • value: number

      Returns string

Optional range

range: { max: number; min: number }

Value range.

Type declaration

  • max: number
  • min: number

Optional renderer

renderer: Function | string

Renderer for the view, which can either be an HTML string or a function that receives the view's data, if any, and returns the final HTML string to render as the view's content.

Optional requiresData

requiresData: boolean

A Boolean value that indicates whether the view requires valid data to be provided in order for it to be rendered. When this value is true and there is no data provided, then the view will be rendered as empty.

Default value is false.

Optional step

step: number

Interval between snapped values.

Optional title

title: string

Title to render above the component.

Optional tooltip

tooltip: boolean | ((value: number) => string)

A Boolean value indicating whether a tooltip should be displayed while one of the control's handles is focused, in which case the tooltip will display the current value for the handle.

Alternatively, a function can be provided which will receive the handle's current value as a parameter and the tooltip content is returned. If null is returned, then the tooltip will not be displayed for that value.

Optional ui

ui: {}

An object that defines the CSS selectors for various UI elements in the view and their reference keys. When a view has been rendered and added to the DOM, you can reference and access these UI targets using this.ui.#key#, where #key# is the key used with this object.

Type declaration

  • [key: string]: string

Optional value

value: number[]

Initial value as an array of numbers, where the first value represents the minimum value in the range, and the second value represents the maximum value.

Optional width

width: number

Width of the slider bar.

Generated using TypeDoc