# Bar Style

Learn how to use Bar Style options.

## Content



You can manage the appearance of [C1RangeSlider](/componentone/api/win/online-input/dotnet-framework-api/C1.Win.C1Input.4.8/C1.Win.C1Input.C1RangeSlider.html) control through various **Bar Style** options.

### BackColor

Back color of **C1RangeSlider** bar can be changed at design time or through code.

To change the back color in design time complete the following:

1.  Right-click the C1RangeSlider control and select **Properties** option.
2.  In **Properties** pane expand the **Styles** node.
3.  Select **BackColor** property from **BarStyle** collection.
4.  In the drop-down menu corresponding to **BackColor** property, select **GrayText**.

![backcolor_rangeslider](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/backcolor_rangeslider.png)

To change the back color at run-time, add the following code in FormLoad event:

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in Visual Basic

DOC-SUMMARY-TAG-CLOSE

```vbnet
Me.C1RangeSlider1.Styles.BarStyle.BackColor = System.Drawing.Color.Lavender
```

DOC-DETAILS-TAG-CLOSE

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in C#

DOC-SUMMARY-TAG-CLOSE

```csharp
this.c1RangeSlider1.Styles.BarStyle.BackColor = System.Drawing.Color.Lavender;
```

DOC-DETAILS-TAG-CLOSE

### BorderColor

To change the border color in design time complete the following:

1.  Right-click the C1RangeSlider control and select **Properties** option.
2.  In **Properties** pane expand the **Styles** node.
3.  Select **BorderColor** property from **BarStyle** collection.
4.  In the drop-down menu corresponding to **BorderColor** property, select **GrayText**.

![BorderColor_RangeSlider](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/bordercolor_rangeslider.png)

To change the border color at run-time, add the following code in FormLoad event:

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in Visual Basic

DOC-SUMMARY-TAG-CLOSE

```vbnet
Me.C1RangeSlider1.Styles.BarStyle.BorderColor = System.Drawing.Color.MediumBlue
```

DOC-DETAILS-TAG-CLOSE

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in C#

DOC-SUMMARY-TAG-CLOSE

```csharp
this.c1RangeSlider1.Styles.BarStyle.BorderColor = System.Drawing.Color.MediumBlue;
```

DOC-DETAILS-TAG-CLOSE

Run your project and observe the customizations. Following image shows the changed back color and border color of range bar in **C1RangeSlider** control:

![rangeslider_barstyle](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/rangeslider_barstyle.png)

### DisabledBackColor

**DisabledBackColor** property enables you to set the background color of range bar, which will be visible when the C1RangeSlider control is disabled.

To change the **DisabledBackColor** in design time complete the following:

1.  Right-click the C1RangeSlider control and select **Properties** option.
2.  In **Properties** pane expand the **Styles** node.
3.  Select **DisabledBackColor** property from **BarStyle** collection.
4.  In the drop-down menu corresponding to **DisabledBackColor** property, select **ScrollBar**.

![disabledbackcolor_rangeslider](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/disabledbackcolor_rangeslider.png)

To change the DisabledBackColor at run-time, add the following code in FormLoad event:

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in Visual Basic

DOC-SUMMARY-TAG-CLOSE

```vbnet
Me.C1RangeSlider1.Styles.BarStyle.DisabledBackColor = System.Drawing.SystemColors.ScrollBar
```

DOC-DETAILS-TAG-CLOSE

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in C#

DOC-SUMMARY-TAG-CLOSE

```csharp
this.c1RangeSlider1.Styles.BarStyle.DisabledBackColor = System.Drawing.SystemColors.ScrollBar;
```

DOC-DETAILS-TAG-CLOSE

### DisabledBorderColor

**DisabledBorderColor** property enables you to set the border color of range bar, which will be visible when the C1RangeSlider control is disabled.

To change the **DisabledBorderColor** in design time complete the following:

1.  Right-click the C1RangeSlider control and select **Properties** option.
2.  In **Properties** pane expand the **Styles** node.
3.  Select **DisabledBorderColor** property from **BarStyle** collection.
4.  In the drop-down menu corresponding to **DisabledBorderColor** property, select **MenuHighlight**.

![rangeslider_disabledbordercolor](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/rangeslider_disabledbordercolor.png)

To change the DisabledBorderColor at run-time, add the following code in FormLoad event:

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in Visual Basic

DOC-SUMMARY-TAG-CLOSE

```vbnet
Me.C1RangeSlider1.Styles.BarStyle.DisabledBorderColor = System.Drawing.Color.Red
```

DOC-DETAILS-TAG-CLOSE

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in C#

DOC-SUMMARY-TAG-CLOSE

```csharp
this.c1RangeSlider1.Styles.BarStyle.DisabledBorderColor = System.Drawing.Color.Red;
```

DOC-DETAILS-TAG-CLOSE

Set the **Enabled** property to **False,** and run the project. Following image shows disabled back color and disabled border color of range bar in the **C1RangeSlider** control:

![rangeslider_blue](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/rangeslider_blue.png)

## See Also

[Thumb Style](/componentone/docs/win/online-input/usingthec1inputcontr/c1inputcontrols/C1RangeSliderControlOverview/C1RangeSliderAppearance/ThumbStyle)