Configure Slider Scale Labels

Labels divide the slider scale into visual reference points and give users a clear idea of the available range. Users can click a label to select the corresponding value. Both the SurveyJS Single-Value Slider and Range Slider inputs support auto-generated and custom scale labels. This demo shows how to configure either type, format the labels, or hide them entirely.

To generate labels automatically, specify their number using the labelCount property. By default, six labels are displayed. In this demo, the number is increased to 11. Each label is positioned at the value it represents.

If the auto-generated labels don't meet your needs, you can define custom ones using the customLabels array. Each item in this array should be a number—the scale value where the label should appear—or an object with the following fields:

• value: number
  The scale value where the label should appear.

• text: string
  The label text to display.

When defined, custom labels override auto-generated ones. This example demonstrates how to use customLabels to display descriptive text instead of numeric values.

To apply a specific format to scale labels, use the labelFormat property. Include the {0} placeholder in your format string to insert the label value—for example, to prefix labels with a dollar sign. You can use the same formatting approach for thumb tooltips using the tooltipFormat property.

If you are using custom labels, labelFormat affects only those that do not define the text property.

If you want to hide all scale labels, set the showLabels property to false.