/ docs / guides / components / slider.rst
slider.rst
  1  Slider
  2  ======
  3  Slider component based on the Javascript library noUiSlider.
  4  
  5  Properties
  6  ----------
  7  
  8  :start: number | list[number]
  9  
 10      The initial values of the slider. This property determines the number of handles. It is a required property.
 11      In the designer use comma separated values which will be parsed as JSON.
 12  
 13  :connect: "upper" | "lower" | bool | list[bool]
 14  
 15      The connect option can be used to control the bar color between the handles or the edges of the slider.
 16      When using one handle, set the value to either ``'lower'`` or ``'upper'`` (equivalently ``[True, False]`` or ``[False, True]``).
 17      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
 18      a coloured bar between all handles.
 19  
 20  
 21  :min: number
 22  
 23      Lower bound. This is a required property
 24  
 25  :max: number
 26  
 27      Upper bound. This is a required property
 28  
 29  :range: object
 30  
 31      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.
 32  
 33  :step: number
 34  
 35      By default, the slider slides fluently. In order to make the handles jump between intervals, the step option can be used.
 36  
 37  :format:
 38  
 39      Provide a format for the values. This can either be a string to call with .format or a format spec.
 40      e.g. ``"{:.2f}"`` or just ``".2f"``. See python''s format string syntax for more options.
 41  
 42      For a mapping of values to descriptions, e.g. ``{1: 'strongly disagree', 2: 'agree', ...}`` use a custom formatter.
 43      This is a dictionary object with ``'to'`` and ``'from'`` as keys and can be set at runtime.
 44      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.
 45  
 46  
 47  :value: number
 48  
 49      returns the value of the first handle. This can only be set after initialization or with a databinding.
 50  
 51  :values: list[numbers]
 52  
 53      returns a list of numerical values. One value for each handle. This can only be set after initialization or with a databinding.
 54  
 55  :formatted_value: str
 56  
 57      returns the value of the first handle as a formatted string, based on the format property
 58  
 59  :formatted_values: list[str]
 60  
 61      returns the a list of values as formatted strings, based on the format property
 62  
 63  :padding: number | list[number, number]
 64  
 65      Padding limits how close to the slider edges handles can be. Either a single number for both edges.
 66      Or a list of two numbers, one for each edge.
 67  
 68  :margin: number
 69  
 70      When using two handles, the minimum distance between the handles can be set using the margin option. The
 71      margin value is relative to the value set in ``range``.
 72  
 73  
 74  :limit: number
 75  
 76      The limit option is the opposite of the margin option, limiting the maximum distance between two handles
 77  
 78  
 79  :animate: bool
 80  
 81      Set the animate option to False to prevent the slider from animating to a new value with when setting values in code.
 82  
 83  
 84  :behaviour: str
 85  
 86      This option accepts a ``"-"`` separated list of ``"drag"``, ``"tap"``, ``"fixed"``, ``"snap"``, ``"unconstrained"`` or ``"none"``
 87  
 88  :tooltips: bool
 89  
 90      Adds tooltips to the sliders. Uses the same formatting as the format property.
 91  
 92  
 93  :pips: bool
 94  
 95      Sets whether the slider has pips (ticks).
 96  
 97  :pips_mode: str
 98  
 99      One of ``'range'``, ``'steps'``, ``'positions'``, ``'count'``, ``'values'``
100  
101  :pips_values: list[number]
102  
103      a list of values. Interpreted differently depending on the mode
104  
105  :pips_density: int
106  
107      Controls how many pips are placed. With the default value of 1, there is one pip per percent.
108      For a value of 2, a pip is placed for every 2 percent. A value of zero will place
109      more than one pip per percentage. A value of -1 will remove all intermediate pips.
110  
111  :pips_stepped: bool
112  
113      the stepped option can be set to true to match the pips to the slider steps
114  
115  :color: str
116  
117      The color of the bars. Can be set to theme colors like ``'theme:Primary 500'`` or hex values ``'#2196F3'``.
118  
119  :color: str
120  
121      The color of the bars. Can be set to theme colors like ``'theme:Primary 500'`` or hex values ``'#2196F3'``.
122  
123  :bar_height: str | int
124  
125      The height of the bar. Can be a css length or an integer, which will be set to the pixel height. Defaults to 18.
126  
127  :handle_size: str
128  
129      The size of the handle. Can be a css length or an integer, which will be the diameter of the handle. Defaults to 34.
130  
131  :enabled: bool
132  
133      Disable interactivity
134  
135  :visible: bool
136  
137      Is the component visible
138  
139  :spacing_above: str
140  
141      One of ``"none"``, ``"small"``, ``"medium"``, ``"large"``
142  
143  :spacing_below: str
144  
145      One of ``"none"``, ``"small"``, ``"medium"``, ``"large"``
146  
147  
148  
149  Methods
150  -------
151  
152  :reset:
153      Resets the slider to its initial position i.e. it's ``start`` property
154  
155  
156  Events
157  ------
158  
159  :slide:
160  
161      Raised whenever the slider is sliding. The handle is provided as an argument to determine which handle is sliding.
162  
163  :change:
164  
165      Raised whenever the slider has finished sliding. The handle is provided as an argument to determine which handle is sliding.
166      Change is the writeback event.
167  
168  
169  :show:
170  
171      Raised when the component is shown.
172  
173  
174  :hide:
175  
176      Raised when the component is hidden.