Range Slider Widget

The range slider widget will be helpful if you need to showcase your website services prices and how they will grow.

Range Slider Sample

Content

• Items

  • Tier

    • Title, Description: Define the title and the description for the tier.
    • Above Title: Choose between icon and image for the tier.
    • Content Type: Choose between default Editor or set a custom Elementor template.

Style

• General

  • Background Type: Choose, whether you want to use classic or gradient type for the range slider. The customization options vary for each type.
  • Padding: Set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Margin: Define the margins.
  • Border Type: Select the needed type of border to use.
  • Border Radius: Set the border radius to make the angles more smooth and round.
  • Box Shadow: Apply the shadow and change the shadow’s settings, such as color, blur, spread, and position.

• Slider

  • Bar

    • Background Type: Choose, whether you want to use classic or gradient type for the bar. The customization options vary for each type.
    • Height: Set the height for the slider bar
    • Border Type: Select the needed type of border to use.
    • Border Radius: Set the border radius to make the angles more smooth and round.
    • Box Shadow: Apply the shadow and change the shadow’s settings, such as color, blur, spread, and position.
    • Margin: Define the margins.

  • Active bar

    • Background Color: Choose the active bar background color.
    • Border Radius: Set the border radius to make the angles more smooth and round.

  • Handler

    • Background Type: Choose, whether you want to use classic or gradient type for the handler. The customization options vary for each type.
    • Height: Set the height for the handler.
    • Width: Set the width for the handler.
    • Border Type: Select the needed type of border to use.
    • Border Radius: Set the border radius to make the angles more smooth and round.
    • Box Shadow: Apply the shadow and change the shadow’s settings, such as color, blur, spread, and position.
    • Y position: Set the vertical position for the handler.
    • X position: Set the horizontal position for the handler.

  • Label

    • Width: Set the width for the label
    • Alignment: Align the label to the left, right, or center.
    • Margin: Define the margins.

  • Switch between Normal, Hover & Active modes to customize the label content.

    • Title

      • Typography: Change the typography options for the title.
      • Color: Choose the color of the title.
      • Margin: Define the margins

    • Description

      • Typography: Change the typography options for the title.
      • Color: Choose the color of the title.
      • Margin: Define the margins

    • Image

      • Height: Set the height for the image.
      • Width: Set the width for the image.

    • Icon

      • Icon Size: Set the font size for the icon.
      • color: Set the color for the icon.

• Content

  • Background Type: Choose, whether you want to use classic or gradient type for the content. The customization options vary for each type.
  • Typography: Change the typography options for the content.
  • Color: Set the color for the content.
  • Padding: Set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Border Type: Select the needed type of border to use.
  • Border Radius: Set the border radius to make the angles more smooth and round.
  • Box Shadow: Apply the shadow and change the shadow’s settings, such as color, blur, spread, and position.