Slider

Slider component based on the Javascript library noUiSlider.

Properties

start:

number | list[number]

The initial values of the slider. This property determines the number of handles. It is a required property. In the designer use comma separated values which will be parsed as JSON.

connect:

“upper” | “lower” | bool | list[bool]

The connect option can be used to control the bar color between the handles or the edges of the slider. When using one handle, set the value to either 'lower' or 'upper' (equivalently [True, False] or [False, True]). For sliders with 2 or more handles, pass a list of True, False values. One value per gap. A single value of True will result in a coloured bar between all handles.

min:

number

Lower bound. This is a required property

max:

number

Upper bound. This is a required property

range:

object

An object with 'min', 'max' as keys. For additional options see noUiSlider documentation. This does not need to be set and will be inferred from the min, max values.

step:

number

By default, the slider slides fluently. In order to make the handles jump between intervals, the step option can be used.

format:

Provide a format for the values. This can either be a string to call with .format or a format spec. e.g. "{:.2f}" or just ".2f". See python’’s format string syntax for more options.

For a mapping of values to descriptions, e.g. {1: 'strongly disagree', 2: 'agree', ...} use a custom formatter. This is a dictionary object with 'to' and 'from' as keys and can be set at runtime. The 'to' function takes a float or int and returns a str. The 'from' takes a str and returns a float or int. See the anvil-extras Demo for an example.

value:

number

returns the value of the first handle. This can only be set after initialization or with a databinding.

values:

list[numbers]

returns a list of numerical values. One value for each handle. This can only be set after initialization or with a databinding.

formatted_value:

str

returns the value of the first handle as a formatted string, based on the format property

formatted_values:

list[str]

returns the a list of values as formatted strings, based on the format property

padding:

number | list[number, number]

Padding limits how close to the slider edges handles can be. Either a single number for both edges. Or a list of two numbers, one for each edge.

margin:

number

When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in range.

limit:

number

The limit option is the opposite of the margin option, limiting the maximum distance between two handles

animate:

bool

Set the animate option to False to prevent the slider from animating to a new value with when setting values in code.

behaviour:

str

This option accepts a "-" separated list of "drag", "tap", "fixed", "snap", "unconstrained" or "none"

tooltips:

bool

Adds tooltips to the sliders. Uses the same formatting as the format property.

pips:

bool

Sets whether the slider has pips (ticks).

pips_mode:

str

One of 'range', 'steps', 'positions', 'count', 'values'

pips_values:

list[number]

a list of values. Interpreted differently depending on the mode

pips_density:

int

Controls how many pips are placed. With the default value of 1, there is one pip per percent. For a value of 2, a pip is placed for every 2 percent. A value of zero will place more than one pip per percentage. A value of -1 will remove all intermediate pips.

pips_stepped:

bool

the stepped option can be set to true to match the pips to the slider steps

color:

str

The color of the bars. Can be set to theme colors like 'theme:Primary 500' or hex values '#2196F3'.

color:

str

The color of the bars. Can be set to theme colors like 'theme:Primary 500' or hex values '#2196F3'.

bar_height:

str | int

The height of the bar. Can be a css length or an integer, which will be set to the pixel height. Defaults to 18.

handle_size:

str

The size of the handle. Can be a css length or an integer, which will be the diameter of the handle. Defaults to 34.

enabled:

bool

Disable interactivity

visible:

bool

Is the component visible

spacing:

spacing

e.g. {“margin”: [10, 10], “padding”: [10, 10]}

Methods

reset:

Resets the slider to its initial position i.e. it’s start property

Events

slide:

Raised whenever the slider is sliding. The handle is provided as an argument to determine which handle is sliding.

change:

Raised whenever the slider has finished sliding. The handle is provided as an argument to determine which handle is sliding. Change is the writeback event.

show:

Raised when the component is shown.

hide:

Raised when the component is hidden.