<div class="my-3"> Slide field<br>
	<div class="m-form-slide row jq_range">
		<div class="m-form-slide__column col-24 col-sm-auto order-sm-2">
			<input type="number" min="0" max="80" step="5" value="50" name="slide" id="frm-pc-form-slide" class="m-form-slide__control jq_range_control">
		</div>
		<div class="m-form-slide__column col-24 col-sm order-sm-1">
			<div class="m-form-slide__slider jq_range_slider"></div>
		</div>
	</div>
</div>

<div class="my-3"> Range field<br>
	<div class="m-form-slide row jq_range">
		<div class="m-form-slide__column col-12 col-md-auto order-md-1">
			<input type="number" min="0" max="80" step="5" value="0" name="range[]" id="frm-pc-form-range-&#039;1&#039;" class="m-form-slide__control jq_range_control">
		</div>
		<div class="m-form-slide__column col-12 col-md-auto order-md-3 text-right">
			<input type="number" min="0" max="80" step="5" value="80" name="range[]" id="frm-pc-form-range-&#039;2&#039;" class="m-form-slide__control jq_range_control">
		</div>
		<div class="m-form-slide__column col-24 col-md order-md-2">
			<div class="m-form-slide__slider jq_range_slider"></div>
		</div>
	</div>
</div>

@import "nouislider/andy-theme";

.m-form-slide {

    &__column {

        align-self: center;

    }

    &__control {

        text-align: center;

        @media(min-width: breakpoint-min(md)) {

            @include font-size(normal);
            padding: em(6.5px) em(10px);

        }

        .js & {

            appearance: textfield;

            // sass-lint:disable no-vendor-prefixes
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {

                -webkit-appearance: none;
                margin: 0;

            }
            // sass-lint:enable no-vendor-prefixes

        }

    }

    &__slider {

        align-self: center;
        display: none;

        .js & {

            display: block;

        }

    }

}

import $ from 'jquery';

import noUiSlider from 'nouislider/distribute/nouislider';

export default class RangeSlide {
	constructor() {
		if (this.test()) {
			$('.jq_range').each(function() {
				var $el = {
					container: $(this),
					controls: $('.jq_range_control', $(this)),
					slider: $('.jq_range_slider', $(this))
				};

				var data = {
					values: []
				};

				$el.controls.each(function() {
					$el.control = this;

					data.min = parseFloat($el.control.min || 0);
					data.max = parseFloat($el.control.max || $el.control.maxlength);
					data.step = parseFloat($el.control.step || 1);

					data.values.push($el.control.value);
				});

				$el.noUiSlider = noUiSlider.create($el.slider[0], {
					start: data.values,
					connect: true,
					range: {
						'min': data.min,
						'max': data.max
					},
					step: data.step
				});

				$el.controls.on('input', function() {
					var values = [ null, null ],
						index = $.inArray(this, $el.controls);

					values[index] = $(this).val();

					$el.noUiSlider.set(values);
				});

				$el.noUiSlider.on('update', (values, handle) => {
					$el.controls.eq(handle).val(Math.round(values[handle]));
				});

				$el.noUiSlider.on('end', () => $el.controls.trigger('change'));
			});
		}
	}

	test() {
		return typeof noUiSlider !== 'undefined' ? true : false;
	}
}

$(() => new RangeSlide);