---
title: "Set Up a 3-color Gradient using a Range Control"
slug: "set-up-a-3-color-gradient-using-a-range-control"
updated: 2026-02-23T09:03:53Z
published: 2026-02-23T09:03:53Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.lakesidesoftware.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Set Up a 3-color Gradient using a Range Control

1. Select the Range Control block.
2. In the **Properties** section, select the **Pane** in which the range slider should appear.
3. Click the drop-down in the **Colors** section to display options, and click in the **Lower range color** field to display a color picker.

![](https://cdn.document360.io/87d11426-6b1f-4b19-b593-b71e55a81af3/Images/Documentation/range_color_pick.png)
4. Select the desired color, and then repeat the process for the **Middle** and **Upper range** colors.
5. If you wish to display the colors as a gradient, select the **Show as gradients** button.

![](https://cdn.document360.io/87d11426-6b1f-4b19-b593-b71e55a81af3/Images/Documentation/range_show_gradient.png)
6. When you are done, click the **Apply** button.

> [!NOTE]
> **NOTE**: A full-dial style of gauge will not show a gradient. In the three-color mode, it will display the distinct color bands regardless of the Show as Gradient option.

In Basic Gradient mode, the full-dial gauge will not show any color-coding.

<style> p[data-block-id] {font-size:1rem;} ul li p[data-block-id] {margin-bottom: 0;} ul[data-type="taskList"] li div p[data-block-id] {margin-bottom: 0;} ol li p[data-block-id] {margin-bottom: 0;} table tbody th p[data-block-id] { margin-bottom: 0;} blockquote p[data-block-id] {margin-bottom: 0 !important;} &nbsp;p[data-block-id]:empty::after {content: "\00A0";} </style>