Intro

Example: 2 pointers

Example: 4 pointers

Example: Moving Tooltips

Example: Marks with Moving Tooltips

Example: Custom Data

Example: Themes

Example: Custom Syling

Example: Getting and Setting Values

Range Slider Use Cases

• Use Cases

  E-commerce Websites	For price filters, allowing customers to select a price range when searching for products.
  Data Visualization Dashboards	For setting ranges on data to be displayed, such as date ranges or thresholds for metrics.
  Media Libraries	For filtering media based on criteria like ratings, year of release, or duration
  Travel and Booking Sites	For selecting price ranges for flights, hotels, or rental services.
  Online Forms and Surveys	Where users might need to indicate a range of preferences or values.
  Real Estate Platforms	For filtering properties by price range, size, or other numeric attributes.
  Financial and Investment Platforms	For setting ranges for investment amounts, risk levels, or interest rates.
  Health and Fitness Apps	For users to set goals or limits on activities, calorie intake, or workout durations.
  Educational Tools	For setting grade or score ranges in educational resources and testing platforms.
  Custom Product Builders	For selecting dimensions, quantities, or other attributes within certain ranges.

Range Slider Attributes and Events

• Attributes

  max	Define slider maximum range. Default to 100.
  min	Define slider minimum range. Default to 0.
  step	You can adjust the slide step using the step attribute. By default, the step is undefined, but can be any positive integer.
  round	You can control the number of decimal places using the round attribute. Its default value is two.
  pointers_values	Define the value of pointers on the slider, separated by a comma. Example: "20,80" will draw 2 pointers on the slider with values 20 and 80. Example: "20,40,60,80" will draw 4 pointers on the slider with values 20, 40, 60, and 80. This attribute accepts a maximum of 5 pointers.
  rtl	Boolean value. True for right to left support.
  data	Instead of specifying a minimum and maximum to define the slider range, it’s possible to provide a list of individual values. The provided elements can be numbers, texts, or any combination of these.
  theme	The slider has the following themes: target, glass, rect, circle, rainbow, ruler.
  range-dragging	Boolean value. True to enable range dragging for a multi-pointer slider.
  moving-tooltip	Boolean value. True adds a moving tooltip to each pointer. You can change the tooltip color, size, and distance to pointer.
  moving-tooltip-styles	Define styling for moving-tooltip separated by comma. Properties: Default values: moving-tooltip-distance-to-pointer: 40 moving-tooltip-width: 35 moving-tooltip-height: 30 moving-tooltip-bg: #475569 moving-tooltip-text-color: #fff moving-tooltip-units: empty string moving-tooltip-units-type: empty string “” or “prefix” Example with default styling and without units: "40,35,30,#475569,#fff"
  marks	Boolean value. True allows to generate points along the slider.
  marks-style	Define styling formarks separated by comma. Properties: Default values: marks-count: 11 marks-values-count: 11 marks-color: #cbd5e1 marks-values-color: #475569 Example with default styling and without units: "11,11,#cbd5e1,#475569"
  styles-object	Advanced styling and settings using object as attribute value. Example: click on formula and add object to the canvas. Add keys and values for advanced customization. Key: Value slider-bg: #CBD5E1 slider-bg-hover: #94A3B8 slider-bg-fill: #47 You can change pointers colors using these keys: pointer-bg, pointer-bg-hover, and pointer-bg-focus. If you only want to color pointer 2 then use this keys: pointer2-bg, pointer2-bg-hover, pointer2-bg-focus. Full list of keys/values is coming soon.

  Events

  change

  It is sent every time the value of the range slider changes. If you save the event data to a toddle variable, you will get an object with all the values available on the slider. Note that value, value0, and value1 are synonyms for the first value. Object example with 2 pointers: {"values":20,80],"value":20,"value0":20,"value1":20,"value2":80}