Slider (Dash.NET)

Dash.NET

Documentation for 0.2.0-alpha.5

Slider Module

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

A slider component with a single handle.

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 style of a specific mark point, the value should be an object which contains style and label properties. • value (number) - The value of the input • drag_value (number) - The value of the input during a drag • className (string) - Additional CSS class for the root DOM node • 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 • 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 value • 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. If you want different actions during and after drag, leave `updatemode` as `mouseup` and use `drag_value` for the continuously updating value. • 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.
Slider	A slider component with a single handle.
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
`Slider.slider id attrs` Full Usage: `Slider.slider id attrs` Parameters: id : `string` attrs : `Attr list` Returns: `DashComponent`	A slider component with a single handle. 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 (number) - The value of the input • drag_value (number) - The value of the input during a drag • className (string) - Additional CSS class for the root DOM node • 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 • 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 value • 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. If you want different actions during and after drag, leave `updatemode` as `mouseup` and use `drag_value` for the continuously updating value. • 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`


                
                  
                    
                      Slider.slider id attrs

Full Usage: Slider.slider id attrs

Parameters:

id : string

attrs : Attr list

Returns: DashComponent

A slider component with a single handle. 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 (number) - The value of the input • drag_value (number) - The value of the input during a drag • className (string) - Additional CSS class for the root DOM node • 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 • 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 value • 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. If you want different actions during and after drag, leave `updatemode` as `mouseup` and use `drag_value` for the continuously updating value. • 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