# Range Slider Widget

> The range slider widget will be helpful if you need to showcase your website services prices with your competitors’ prices.

Source: https://phox.wdes.org/docs/range-slider-widget/
Last updated: 2022-08-21

![wdes widget range](https://phox.wdes.org/docs/assets/wdes-widget-range.nInZfMwA_kQarB.webp)

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

## Range Slider Sample

![sample](https://phox.wdes.org/docs/assets/sample.fSvkklN9_2mrMa1.webp)

#### Content

![slider content](https://phox.wdes.org/docs/assets/slider-content.CWGmXpSj_2u5xEg.webp)

- **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

![style range](https://phox.wdes.org/docs/assets/style-range.BWJfTMCy_1MpqrQ.webp)

- **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.