Slider

This article describes the Slider component and its properties.

Who can use this feature?

All Squirrel365 plans include the Slider component.

For more details, see our pricing comparison matrix.

Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article

The Slider allows a user to vary a value between pre-set limits. The options can be laid out either vertically or horizontally:

Select Slider from the Controls category of the component library. Move the mouse over the canvas and click to add the component to your project:

Slider Properties

The Slider properties are organized into GENERAL, STYLING, and DYNAMIC VISIBILITY drawers. This guide will describe the general and styling properties only; the dynamic visibility properties are generic and a separate guide and tutorial on dynamic visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.

---

GENERAL

• Orientation – This property controls whether the slider is laid out vertically or horizontally.

• Value – This property is the value that is controlled by the slider. This should be bound to a cell in the spreadsheet. The value in the spreadsheet will update and be updated by the position of the slider handle.

• Number format – This property determines how the numbers in the end-values and the tooltip are formatted. Note:

  • selecting a number, percentage, or currency provides an extra option to set the number of decimal places displayed

  • selecting currency also provides an option to set the currency character and in the case of a custom character whether it should come before or after the number

  • when Percentage is selected the component treats the value in the cell as fractional, i.e. 0.1 to represent 10%, 0.5 to represent 50%, etc. However, the other values in the property sheet (Min, Max, and Step Size) should be treated as percentages, ie 10 for 10% and 50 for 50%,

• Min / Max – These properties determine the minimum and maximum values the user can enter using the slider. The spreadsheet value which is bound to the Slider can still range outside these values if they are updated by other logic in the spreadsheet, if this occurs then the Slider will show display at min or max respectively.

• Steps – These properties determine how finely-grained the movement of the slider handle is as the user drags it.

  • Set step increment as – this property determines whether the Increment value (below) is used to set the absolute step size or the number of steps between the slider minimum and maximum

  • Increment – this property determines either the absolute step size or the number of steps between the slider minimum and maximum, depending on the previous property

---

STYLING

The appearance of the Slider can be altered to suit a theme or particular style by using the STYLING properties.

TRACK

These properties apply to the track of the Slider.

• Thickness – the thickness in pixels of the slider track

• Track color – the color of the body of the slider track

  • Opacity – the opacity of the body of the slider track

• Border – the color of the outline of the slider track

  • Opacity – the opacity of the outline of the slider track

• Weight – the thickness, in pixels, of the outline of the slider track.

  • Individual Weight - selected this property to apply different widths to each of the component's borders. Each of these individual inputs can be manually edited or bound to the spreadsheet.

• Selected Range Color – The color of the portion of the track to the left of the slider handle.

  • Opacity – The opacity of the portion of the track to the left of the slider handle.

• Corner – the radius of the ends of the slider track, a higher value will make the ends of the track more rounded a lower value will make them more square

  • Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.

HANDLE

These formatting properties apply to the handle of the Slider.

• Fill color – the color of the body of the slider handle

  • Opacity – the opacity of the body of the slider handle

• Border color – the color of the outline of the slider handle

  • Opacity – the opacity of the outline of the slider handle

• Weight – the thickness, in pixels, of the outline of the slider handle.

  • Individual Weight - selected this property to apply different widths to each of the component's borders. Each of these individual inputs can be manually edited or bound to the spreadsheet.

• Size – The height and width of the slider handle in pixels.

• Radius – the curvature, in pixels, of the slider handle (setting this to half the size or more will make the handle a circle)

• Corner – the radius of the ends of the slider track, a higher value will make the ends of the track more rounded a lower value will make them more square

  • Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.

MIN MAX VALUES

These formatting properties can be used to apply a different style to minimum and maximum labels on the Slider.

The min/max values can be turned off by deselecting the check box to the right of the “MIN MAX VALUES” heading.

• Font – The fonts used for the labels.

• Size – The size of the font of the labels.

• Text Colour – The color of the text of the labels.

  • Opacity – This opacity of the text of the labels.

VALUE TOOLTIPS

These formatting properties apply to the value tooltip of the slider.

The value tooltips can be turned off by deselecting the check box to the right of the “VALUES TOOLTIPS” heading.

• Font – The fonts used for the tooltip.

• Size – The size of the font of the tooltip.

• Text Colour – The color of the text of the tooltip.

  • Opacity – The opacity of the text of the tooltip.

• Background Fill – The color of the background of the tooltip

  • Opacity – The opacity of the background of the tooltip