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.