# Bunifu Range

## Overview

**Bunifu Range** is a nifty .NET double slider control that allows the user to select a sub-range of values from a larger range of possible values. It also allows you to filter data by selecting a sub-range collection from a larger collection. 

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mi9N0WFW8MShaH05jl6%2F-Mi9NCTMyu76trB5tzyJ%2Frange05.gif?alt=media\&token=dc09a78e-d48d-4d5c-8270-aec72dfd7b65)

## Getting Started

### **Adding Bunifu Range at Design Time**

Bunifu Range is added to the form by simply locating **`BunifuRange`** in your toolbox and drag it to your form as shown below. You can then customize using custom properties as will be elaborated later in this article.

 

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mi5ookebbXKNvzXwncV%2F-Mi5sZTTUiLP53MWwtCX%2Frange02.gif?alt=media\&token=50dd16ac-8772-4d4b-8e93-53499f17d157)

### **Adding Bunifu Range at Run Time**

To add Bunifu range at run-time we will use the Load event handler to run the code that adds Bunifu Range to our form as shown below.

{% tabs %}
{% tab title="C#" %}

```csharp
private void Form1_Load(object sender, EventArgs e){
    
    var range = new Bunifu.Framework.UI.BunifuRange();
    this.Controls.Add(range);
    
}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    
    Dim range As New Bunifu.Framework.UI.BunifuRange
    Controls.Add(range);
    
End Sub
```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Let's take a deep dive and get insights into the available properties on Bunifu Range.
{% endhint %}

## Appearance Properties

### **`BackgroundColor`**

This property allows you to get or set the background color of the range track. It supports the use of RGB or HEX color values.

### **`BorderRadius`**

This property allows you to set the roundness of the range selector edges. The greater the value, the more rounded the selectors become.

###  **`IndicatorColor`**

This property enables you to get or set a color value of the minimum and maximum range selector indicators. It supports the use of RGB or HEX color values.

## Value Properties

### **`MaximumRange`**

This property allows you to get or set the **total range** of values the user can select. It accepts only integer values and has a default value of **100**.

### **`RangeMax`** 

This property allows you to get or set the maximum value filter within the value set in the `MaximumRange` property. 

### **`RangeMin`** 

This property allows you to set the minimum value filter within the total range value set in the `MaximumRange` property.

## RangeChanged Event

The range changed event allows you to perform actions whenever the `RangeMax` and `RangeMin` properties are changed on the control. Here's a code snippet that sets the new value text to a label control whenever the `RangeChanged` event  is raised.

{% tabs %}
{% tab title="C#" %}

```csharp
private void bunifuRange1_RangeChanged(object sender, EventArgs e)
{
    bunifuLabel.Text = string.Format("${0} - ${1}", bunifuRange1.RangeMin, bunifuRange1.RangeMax);
}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
Private Sub bunifuRange1_RangeChanged(ByVal sender As Object, ByVal e As EventArgs)
	bunifuLabel.Text = String.Format("${0} - ${1}", bunifuRange1.RangeMin, bunifuRange1.RangeMax)
End Sub

```

{% endtab %}
{% endtabs %}

## Take Away

We hope you have gained insights into using Bunifu Range control and that it will help you create a better user experience for your users. It works out-of-the-box and is also customizable to suit the needs of your app.

Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen.