RangeSlider (Dash.NET)

Dash.NET

Documentation for 0.2.0-alpha.5

RangeSlider Module

Namespace: Dash.NET.DCC
Assembly: Dash.NET.dll

A double slider with two handles. Used for specifying a range of numerical values.

Types

Type	Description
Attr	A list of children or a property for this dash component
Mark	string \| record with the fields: 'label: string (optional)', 'style: record (optional)'
Prop	• marks (dict with values of type: string \| record with the fields: 'label: string (optional)', 'style: record (optional)') - Marks on the slider. The key determines the position (a number), and the value determines what will show. If you want to set the stylMarksTypec mark point, the value should be an object which contains style and label properties. • value (list with values of type: number) - The value of the iMarksType#10; • drag_value (list with values of type: number) - The value of the input during a drag • allowCross (boolean) - allowCross could be set as true to allow those handles to cross. • className (string) - Additional CSS class for the root DOM node • count (number) - Determine how many ranges to render, and multiple handles will be rendered (number + 1). • disabled (boolean) - If true, the handles can't be moved. • dots (boolean) - When the step value is greater than 1, you can set the dots to true if you want to render the slider with dots. • included (boolean) - If the value is true, it means a continuous value is included. Otherwise, it is an independent value. • min (number) - Minimum allowed value of the slider • max (number) - Maximum allowed value of the slider • pushable (boolean \| number) - pushable could be set as true to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. • tooltip (record with the fields: 'always_visible: boolean (optional)', 'placement: value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' (optional)') - Configuration for tooltips describing the current slider values • step (number) - Value by which increments or decrements are made • vertical (boolean) - If true, the slider will be vertical • verticalHeight (number; default 400) - The height, in px, of the slider if it is vertical. • updatemode (value equal to: 'mouseup', 'drag'; default mouseup) - Determines when the component should update its `value` property. If `mouseup` (the default) then the slider will only trigger its value when the user has finished dragging the slider. If `drag`, then the slider will update its value continuously as it is being dragged. Note that for the latter case, the `drag_value` property could be used instead. • loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer • persistence (boolean \| string \| number) - Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. • persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. • persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.
PushableType	boolean \| number
RangeSlider	A double slider with two handles. Used for specifying a range of numerical values.
StyledMarkValue	record with the fields: 'label: string (optional)', 'style: record (optional)'
TooltipOptions	record with the fields: 'always_visible: boolean (optional)', 'placement: value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' (optional)'
TooltipPlacement	value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' Determines the placement of tooltips See https://github.com/react-component/tooltip#api top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` will in reality appear to be on the top right of the handle
UpdateOn	value equal to: 'mouseup', 'drag'

Functions and values

Function or value Description

Function or value	Description
`RangeSlider.rangeSlider id attrs` Full Usage: `RangeSlider.rangeSlider id attrs` Parameters: id : `string` attrs : `Attr list` Returns: `DashComponent`	A double slider with two handles. Used for specifying a range of numerical values. Properties: • id (string) - The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app. • marks (dict with values of type: string \| record with the fields: 'label: string (optional)', 'style: record (optional)') - Marks on the slider. The key determines the position (a number), and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties. • value (list with values of type: number) - The value of the input • drag_value (list with values of type: number) - The value of the input during a drag • allowCross (boolean) - allowCross could be set as true to allow those handles to cross. • className (string) - Additional CSS class for the root DOM node • count (number) - Determine how many ranges to render, and multiple handles will be rendered (number + 1). • disabled (boolean) - If true, the handles can't be moved. • dots (boolean) - When the step value is greater than 1, you can set the dots to true if you want to render the slider with dots. • included (boolean) - If the value is true, it means a continuous value is included. Otherwise, it is an independent value. • min (number) - Minimum allowed value of the slider • max (number) - Maximum allowed value of the slider • pushable (boolean \| number) - pushable could be set as true to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. • tooltip (record with the fields: 'always_visible: boolean (optional)', 'placement: value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' (optional)') - Configuration for tooltips describing the current slider values • step (number) - Value by which increments or decrements are made • vertical (boolean) - If true, the slider will be vertical • verticalHeight (number; default 400) - The height, in px, of the slider if it is vertical. • updatemode (value equal to: 'mouseup', 'drag'; default mouseup) - Determines when the component should update its `value` property. If `mouseup` (the default) then the slider will only trigger its value when the user has finished dragging the slider. If `drag`, then the slider will update its value continuously as it is being dragged. Note that for the latter case, the `drag_value` property could be used instead. • loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer • persistence (boolean \| string \| number) - Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. • persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. • persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. id : `string` attrs : `Attr list` Returns: `DashComponent`


                
                  
                    
                      RangeSlider.rangeSlider id attrs

Full Usage: RangeSlider.rangeSlider id attrs

Parameters:

id : string

attrs : Attr list

Returns: DashComponent

A double slider with two handles. Used for specifying a range of numerical values. Properties: • id (string) - The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app. • marks (dict with values of type: string | record with the fields: 'label: string (optional)', 'style: record (optional)') - Marks on the slider. The key determines the position (a number), and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties. • value (list with values of type: number) - The value of the input • drag_value (list with values of type: number) - The value of the input during a drag • allowCross (boolean) - allowCross could be set as true to allow those handles to cross. • className (string) - Additional CSS class for the root DOM node • count (number) - Determine how many ranges to render, and multiple handles will be rendered (number + 1). • disabled (boolean) - If true, the handles can't be moved. • dots (boolean) - When the step value is greater than 1, you can set the dots to true if you want to render the slider with dots. • included (boolean) - If the value is true, it means a continuous value is included. Otherwise, it is an independent value. • min (number) - Minimum allowed value of the slider • max (number) - Maximum allowed value of the slider • pushable (boolean | number) - pushable could be set as true to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. • tooltip (record with the fields: 'always_visible: boolean (optional)', 'placement: value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' (optional)') - Configuration for tooltips describing the current slider values • step (number) - Value by which increments or decrements are made • vertical (boolean) - If true, the slider will be vertical • verticalHeight (number; default 400) - The height, in px, of the slider if it is vertical. • updatemode (value equal to: 'mouseup', 'drag'; default mouseup) - Determines when the component should update its `value` property. If `mouseup` (the default) then the slider will only trigger its value when the user has finished dragging the slider. If `drag`, then the slider will update its value continuously as it is being dragged. Note that for the latter case, the `drag_value` property could be used instead. • loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer • persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. • persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. • persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

id : string
attrs : Attr list

Returns: DashComponent