Range Slider

Mostly used in mobile applications.

You have to go through a two-step form wizard to enable this Control, i.e., Design & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Range Slider” control form wizard. Here you are required to fill in the following details:

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name: Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.

2nd Step – Advance

  1. Design
    1. Minimum Value: Define min. Value of the slider for instance 0
    2. Maximum Value: Define min. Value of the slider for instance 100
    3. Step: Defines the incremental value for each movement of the slider, determining the smallest unit the slider can increment or decrement by.
    4. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    5. Track Height: Specifies the height of the track (the line along which the slider thumb moves), adjusting the visual thickness of the slider.
    6. Thumb Border Radius: Controls the roundness of the edges of the slider thumb, allowing customization of the thumb’s appearance.
    7. Thumb Width: Sets the width of the slider thumb, defining its horizontal size.
    8. Thumb Height: Sets the height of the slider thumb, defining its vertical size.
    9. Thumb Background Color: Specifies the background color of the slider thumb, allowing customization of its appearance.
    10. Minimum Track Color: Defines the color of the track from the starting point (minimum value) to the thumb, typically representing the portion of the slider that has been selected.
    11. Maximum Track Color: Defines the color of the track from the thumb to the end (maximum value), indicating the unselected portion of the slider.
  2. Mobile
    1. Margin Left: Defines the space or gap on the left side of an element, controlling its position relative to adjacent elements.
    2. Margin Top: Specifies the space or gap at the top of an element, determining its vertical position relative to elements above it.
    3. Margin Right: Sets the space or gap on the right side of an element, influencing its horizontal positioning relative to adjacent elements.
    4. Margin Bottom: Defines the space or gap at the bottom of an element, controlling its vertical positioning relative to elements below it.

Click “Confirm” and “Range Slider” control is configured.