PHPackages                             ruskid/yii2-nouislider - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ruskid/yii2-nouislider

ActiveLibrary[Utility & Helpers](/categories/utility)

ruskid/yii2-nouislider
======================

Yii2 noUiSlider Wrapper

3.1(8y ago)28.3k4[1 issues](https://github.com/ruskid/yii2-nouislider/issues)GNUPHP

Since May 15Pushed 6y ago1 watchersCompare

[ Source](https://github.com/ruskid/yii2-nouislider)[ Packagist](https://packagist.org/packages/ruskid/yii2-nouislider)[ Docs](https://github.com/ruskid/yii2-nouislider)[ RSS](/packages/ruskid-yii2-nouislider/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (4)Dependencies (2)Versions (5)Used By (0)

Yii2 noUiSlider Wrapper.
========================

[](#yii2-nouislider-wrapper)

Installation
------------

[](#installation)

The preferred way to install this extension is through .

Either run

```
php composer.phar require ruskid/yii2-nouislider "dev-master"
```

or add

```
"ruskid/yii2-nouislider": "dev-master"
```

to the require section of your `composer.json` file.

Usage
-----

[](#usage)

- Check  for options.
- Check  for events.

### Main Slider

[](#main-slider)

Can be configured the way you want. This slider is very simple it doesn't do anything special. You need to define your own event handlers if you want to update the hidden input's value on change, slide or update etc.

```
use ruskid\nouislider\Slider;

echo $form->field($model, 'price')->widget(Slider::className(), [
    'pluginOptions' => [
        'start' => [20],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);

echo Slider::widget([
    'name' => 'test',
    'value' => 50,
    'events' => [
        Slider::NOUI_EVENT_CHANGE => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("changed"); }'),
        Slider::NOUI_EVENT_START => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("start sliding"); }'),
        Slider::NOUI_EVENT_END => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("end sliding"); }'),
        Slider::NOUI_EVENT_UPDATE => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("updated"); }'),
        Slider::NOUI_EVENT_SET => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("set"); }'),
        Slider::NOUI_EVENT_SLIDE => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("slided"); }'),
    ],
    'pluginOptions' => [
        'start' => [20],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);
```

### Sliders with default behavior

[](#sliders-with-default-behavior)

You can use some of the sliders inside sliders directory and create your own. Extend Main Slider.

**Pull request your sliders!**

```
echo $form->field($model, 'price_min')->widget(OneHandleSlider::className(), [
    'valueContainerId' => 'price_min-container',
    'pluginOptions' => [
        'start' => [20],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);

echo $form->field($model, 'price_max')->widget(OneHandleSlider::className(), [
    'valueContainerId' => 'price_max-container',
    'pluginOptions' => [
        'start' => [20],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);

Price min:
Price max:

echo $form->field($model, 'price')->widget(TwoHandleSlider::className(), [
    'lowerValueContainerId' => 'price_min-container',
    'upperValueContainerId' => 'price_max-container',
    'pluginOptions' => [
        'start' => [20, 50],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);
```

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance10

Infrequent updates — may be unmaintained

Popularity27

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity66

Established project with proven stability

 Bus Factor1

Top contributor holds 88.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~149 days

Total

4

Last Release

3200d ago

Major Versions

1.0 → 2.02017-08-04

2.0 → 3.02017-08-07

### Community

Maintainers

![](https://www.gravatar.com/avatar/12093591a2c01098c8613b3d765dd14f64e952691b0048cd0f5ee65438a77244?d=identicon)[ruskid](/maintainers/ruskid)

---

Top Contributors

[![ruskid](https://avatars.githubusercontent.com/u/8279841?v=4)](https://github.com/ruskid "ruskid (8 commits)")[![egorrishe](https://avatars.githubusercontent.com/u/4169621?v=4)](https://github.com/egorrishe "egorrishe (1 commits)")

---

Tags

yii2nouislider

### Embed Badge

![Health badge](/badges/ruskid-yii2-nouislider/health.svg)

```
[![Health](https://phpackages.com/badges/ruskid-yii2-nouislider/health.svg)](https://phpackages.com/packages/ruskid-yii2-nouislider)
```

###  Alternatives

[dmstr/yii2-cookie-consent

Yii2 Cookie Consent Widget

1452.6k](/packages/dmstr-yii2-cookie-consent)[richardfan1126/yii2-js-register

Yii2 widget to register JS into view

1357.2k7](/packages/richardfan1126-yii2-js-register)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)