TouchSpin Widget TouchSpin.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The TouchSpin widget is a Yii 2 wrapper for for the bootstrap-touchspin plugin by István Ujj-Mészáros, with certain additional enhancements. This input widget is a mobile and touch friendly input spinner component for Bootstrap 3. You can use the widget buttons to rapidly increase and decrease numeric and/or decimal values in your input field. The widget can be setup to include model validation rules for the related model attribute.

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the TouchSpin widget configuration are:
  • upOptions: array the HTML attributes for the up button. It consists of these additional keys:

    • icon: array glyphicon prefix that will be used to display icon for the button. Defaults to forward.

    • label: string label for the button which is not HTML encoded.

  • downOptions: array the HTML attributes for the down button. It consists of these additional keys:

    • icon: array glyphicon prefix that will be used to display icon for the button. Defaults to backward.

    • label: string label for the button which is not HTML encoded.

  • options: array the HTML attributes for the widget input tag.

  • pluginOptions: array the TouchSpin JQuery plugin Options. Refer the plugin documentation for details. The buttonup_class and buttondown_class parameters have been removed. Instead, buttonup and buttondown have been added to directly pass each button's entire HTML content. The buttonup and buttondown parameters will be automatically passed based on the upOptions and downOptions respectively.

  • pluginEvents: array the TouchSpin JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin documentation for details. For example:

    pluginEvents = [
        "touchspin.on.startspin " => "function() { log("touchspin.on.startspin"); }",
        "touchspin.on.startupspin" => "function() { log("touchspin.on.startupspin"); }",
    ];
    

Usage with ActiveForm and model
With a model and without ActiveForm
Usage without a model
A readonly touchspin input
A disabled touchspin input
use kartik\widgets\TouchSpin

// Usage with ActiveForm and model
echo $form->field($model, 'brightness')->widget(TouchSpin::classname(), [
    'options' => ['placeholder' => 'Adjust ...'],
]);

// With a model and without ActiveForm
echo '<label class="control-label">Color</label>';
echo TouchSpin::widget([
    'model' => $model,
    'attribute' => 'color',
    'options' => ['placeholder' => 'Adjust ...']
]);

// Usage without a model
echo '<label class="control-label">Contrast</label>';
echo TouchSpin::widget([
    'name' => 'contrast',
    'options' => ['placeholder' => 'Adjust ...'],
]);

// A readonly touchspin input
echo '<label class="control-label">Saturation</label>';
echo TouchSpin::widget([
    'name' => 'saturation',
    'options' => [
        'placeholder' => 'Adjust ...', 
        'readonly' => true
     ],
]);

// A disabled touchspin input
echo '<label class="control-label">Hue</label>';
echo TouchSpin::widget([
    'name' => 'hue',
        'options' => [
            'placeholder' => 'Adjust ...', 
            'disabled' => true
         ],
]);

With a prefixed addon
With a postfixed addon
Adjust the size of the widget
Adjust buttons display and styles
Control initial value, limits, step, and boost.
Vertical button alignment
Vertical buttons with custom icons
use kartik\widgets\TouchSpin

// With a prefixed addon
echo TouchSpin::widget([
    'name' => 't1',
    'pluginOptions' => ['prefix' => '$']
]);

// With a postfixed addon
echo TouchSpin::widget([
    'name' => 't2',
    'pluginOptions' => ['postfix' => '%']
]);

// Adjust the size of the widget
echo TouchSpin::widget([
    'name' => 't3',
    'options' => ['class' => 'input-lg']
]);

// Adjust buttons display and styles
echo TouchSpin::widget([
    'name' => 't4',
    'upOptions' => ['class' => 'btn btn-success', 'icon' => 'plus-sign'],
    'downOptions' => ['class' => 'btn btn-danger', 'icon' => 'minus-sign'],
]);

// Control initial value, limits, step, and boost.
echo TouchSpin::widget([
    'name' => 't5',
    'pluginOptions' => [
        'initval' => 3.00,
        'min' => 0,
        'max' => 100,
        'step' => 0.1,
        'decimals' => 2,
        'boostat' => 5,
        'maxboostedstep' => 10,
        'prefix' => '$',
    ],
]);

// Vertical button alignment
echo TouchSpin::widget([
    'name' => 't6',
    'pluginOptions' => ['verticalbuttons' => true]
]);

// Vertical buttons with custom icons
echo TouchSpin::widget([
    'name' => 't7',
    'pluginOptions' => [
        'verticalbuttons' => true,
        'verticalupclass' => 'glyphicon glyphicon-plus',
        'verticaldownclass' => 'glyphicon glyphicon-minus',
    ]
]);