# Thumb Style Learn how to use Thumb Style options in C1RangeSlider. ## 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 **Thumb Style** options. ### Back Color Back color of C1RangeSlider thumbs 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 **ThumbStyle** collection. 4. In the drop-down menu corresponding to BackColor property, select **Tan**. 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.ThumbStyle.BackColor = System.Drawing.Color.Tan ``` 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.ThumbStyle.BackColor = System.Drawing.Color.Tan; ``` DOC-DETAILS-TAG-CLOSE ### Border Color Border color of C1RangeSlider thumbs 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 **BorderColor** property from **ThumbStyle** collection. 4. In the drop-down menu corresponding to **BorderColor** property, select **ActiveCaptionText**. 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.ThumbStyle.BorderColor = System.Drawing.SystemColors.ActiveCaptionText ``` 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.ThumbStyle.BorderColor = System.Drawing.SystemColors.ActiveCaptionText; ``` DOC-DETAILS-TAG-CLOSE ### Corner Radius **CorneRadius** property enables you to customize the appearance of thumbs of **C1RangeSlider** control. Thumbs with CornerRadius set to 0 will be rectangular. To add curvature to the thumbs, you can increase their corner radius. Corner Radius of C1RangeSlider thumbs can be changed at design time or through code To change CornerRadius of thumbs 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 **CornerRadius** property from **ThumbStyle** collection. 4. Set **CornerRadius** to **4**. To change the Corner Radius 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.ThumbStyle.CornerRadius = 4 ``` 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.ThumbStyle.CornerRadius = 4; ``` DOC-DETAILS-TAG-CLOSE The following image shows customized thumb styles of **C1RangeSlider** control with corner radius 4. **![rangelsider_rangeslider_blue](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/thumbstylebackcolor.png)** ### Disabled Back Color **DisabledBackColor** property enables you to set the background color of thumb, which will be visible when the C1RangeSlider control is disabled. DisabledBackColor of C1RangeSlider thumbs can be changed at design time or through code 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 **ThumbStyle** collection. 4. In the drop-down menu corresponding to **DisabledBackColor** property, select **InactiveCaption**. 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.ThumbStyle.DisabledBackColor = System.Drawing.SystemColors.InactiveCaption ``` 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.ThumbStyle.DisabledBackColor = System.Drawing.SystemColors.InactiveCaption; ``` DOC-DETAILS-TAG-CLOSE ### Disabled Border Color **DisabledBorderColor** property enables you to set the border color of thumbs, which will be visible when the C1RangeSlider control is disabled. DisabledBorderColor of C1RangeSlider thumbs can be changed at design time or through code. 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 **DisabledBorderColo**r property from **ThumbStyle** collection. 4. In the drop-down menu corresponding to **DisabledBorderColor** property, select **WindowFrame**. 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.ThumbStyle.DisabledBorderColor = System.Drawing.SystemColors.WindowFrame ``` 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.ThumbStyle.DisabledBorderColor = System.Drawing.SystemColors.WindowFrame; ``` DOC-DETAILS-TAG-CLOSE The following image shows customised thumb styles in disabled C1RangeSlider control. ![RangeSlider_Disabled_ThumbStyle](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/imagesext/disabledstyle.png) ### Hovered Back Color **HoveredBackColor** property enables you to set the back color of thumbs, which will be visible when mouse is over it. HoveredBackColor of C1RangeSlider thumbs can be changed at design time or through code To change the **HoveredBackColor** 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 **HoveredBackColor** property from **ThumbStyle** collection. 4. In the drop-down menu corresponding to **HoveredBackColor** property, select **ActiveCaption**. To change the HoveredBackColor 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.ThumbStyle.HoveredBackColor = System.Drawing.SystemColors.ActiveCaption ``` 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.ThumbStyle.HoveredBackColor = System.Drawing.SystemColors.ActiveCaption; ``` DOC-DETAILS-TAG-CLOSE ### Hovered Border Color **HoveredBorderColor** property enables you to set the border color of thumbs, which will be visible when mouse is over it. HoveredBackColor of C1RangeSlider thumbs can be changed at design time or through code To change the **HoveredBorderColor** 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 **HoveredBorderColor** property from **ThumbStyle** collection. 4. In the drop-down menu corresponding to **HoveredBorderColor** property, select **Blue**. To change the HoveredBorderColor 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.ThumbStyle.HoveredBorderColor = System.Drawing.Color.Blue ``` 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.ThumbStyle.HoveredBorderColor = System.Drawing.Color.Blue; ``` DOC-DETAILS-TAG-CLOSE The following image shows customized thumb styles of C1RangeSlider control on mouse over. ![RangeSlider_ThumbStyle_MouseOver](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/imagesext/thumbstyle_mouseover.png) ### Pressed Back Color **PressedBackColor** property enables you to set the back color of thumbs, which will be visible when mouse-click is performed over it. PressedBackColor of C1RangeSlider thumbs can be changed at design time or through code To change the **PressedBackColor** 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 **PressedBackColor** property from **ThumbStyle** collection. 4. In the drop-down menu corresponding to **PressedBackColor** property, select **Gold**. To change the PressedBackColor 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.ThumbStyle.PressedBackColor = System.Drawing.Color.Gold ``` 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.ThumbStyle.PressedBackColor = System.Drawing.Color.Gold; ``` DOC-DETAILS-TAG-CLOSE ### Pressed Border Color **PressedBorderColor** property enables you to set the border color of thumbs, which will be visible when mouse-click is performed over it. PressedBorderColor of C1RangeSlider thumbs can be changed at design time or through code To change the **PressedBorderColor** 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 **PressedBorderColor** property from **ThumbStyle** collection. 4. In the drop-down menu corresponding to **PressedBorderColor** property, select **Orange**. To change the PressedBorderColor 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.ThumbStyle.PressedBorderColor = System.Drawing.Color.Orange ``` 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.ThumbStyle.PressedBorderColor = System.Drawing.Color.Orange; ``` DOC-DETAILS-TAG-CLOSE The following image shows customized thumb styles of C1RangeSlider control when mouse-click is performed. ![pressedbordercolor_rangeslider](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/pressedbordercolor.gif) ## See Also **Documents** [Data Binding](/componentone/docs/win/online-input/usingthec1inputcontr/databinding)