# Rangeslider

We have used jQueryUI range slider for input range slider inputs.&#x20;

<div align="left"><img src="https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUYr7SUAZzxJTTA-7kc%2F-LUYrTBFvQjiza8-XZS_%2Fimage.png?alt=media&#x26;token=7ec28fab-f5ef-4548-a15e-120869052c81" alt=""></div>

#### Step 1

Include jQueryUI stylesheet before atmos theme Stylesheet to make sure it properly overrides the UI according to our needs

```markup
<link rel="stylesheet" href="assets/vendor/jquery-ui/jquery-ui.min.css">
```

#### Step 2

Add jqueryUI JavaScript files if not included already.

```markup
<script src="assets/vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
```

#### Step 3

Add markup

```markup
<div class="input-slider"></div>
```

#### Step 4

Initialize the plugin

```javascript
 $(".input-slider").slider({
        range: "min",
 });
```

{% embed url="<https://jqueryui.com/slider/>" %}
