Alpaca components for Magento 2

Range 

<div class="range-filter ">
    <div class="range-filter__slider " data-min="0" data-max="1000" data-show-float="0"></div>
    <div class="range-filter__inputs-wrapper ">
        <div class="input range-filter__input range-filter__input--lower">
            <label class="
            label
            input__label
            range-filter__label
        " for="range-filter-min">
                Minimum value
            </label>
            <input class="input__field range-filter__field range-filter__field--lower" id="range-filter-min" name="range-filter-min" type="" placeholder="">
        </div>

        <span class="range-filter__suffix ">
            $
        </span>
        <span class="range-filter__dash">-</span>
        <div class="input range-filter__input range-filter__input--upper">
            <label class="
            label
            input__label
            range-filter__label
        " for="range-filter-max">
                Maximum value
            </label>
            <input class="input__field range-filter__field range-filter__field--upper" id="range-filter-max" name="range-filter-max" type="" placeholder="">
        </div>

        <span class="range-filter__suffix ">
            $
        </span>
    </div>
</div>
<button class="button range-filter__button button--fluid margin-vc-sm" type="button" data-min="0" data-max="1000" data-attribute="price" href="#" data-filter-url="#">
    Apply
</button>

<script src="/components/raw/range/range.js"></script>
 
<div
    class="range-filter {{ class }}"
    {{{ attributes }}}
>
    <div
        class="range-filter__slider {{ slider.lass }}"
        data-min="{{ filter.input.minValue }}"
        data-max="{{ filter.input.maxValue }}"
        data-show-float="{{ showFloat }}"
    ></div>
    <div class="range-filter__inputs-wrapper {{ filter.wrapperClass }}">
        {{ render '@input' rangeInputLower }}
        <span class="range-filter__suffix {{ filter.suffix.lowerClass }}">
            {{ filter.suffix.lowerText }}
        </span>
        <span class="range-filter__dash">-</span>
        {{ render '@input' rangeInputUpper }}
        <span class="range-filter__suffix {{ filter.suffix.upperClass }}">
            {{ filter.suffix.upperText }}
        </span>
    </div>
</div>
{{ render '@button' apply }}
{{#if script}}
    <script src="{{ static 'range.js' }}"></script>
{{/if}}
 
{
  "attributes": "",
  "class": "",
  "filter": {
    "wrapperClass": "",
    "input": {
      "upperClass": "",
      "lowerClass": "",
      "maxValue": "1000",
      "minValue": "0",
      "type": "text"
    },
    "suffix": {
      "lowerText": "$",
      "upperText": "$",
      "lowerClass": "",
      "upperClass": ""
    }
  },
  "rangeInputLower": {
    "class": "range-filter__input range-filter__input--lower",
    "label": {
      "class": "range-filter__label",
      "text": "Minimum value"
    },
    "field": {
      "class": "range-filter__field range-filter__field--lower",
      "id": "range-filter-min",
      "name": "range-filter-min",
      "placeholder": "",
      "value": "0"
    }
  },
  "rangeInputUpper": {
    "class": "range-filter__input range-filter__input--upper",
    "label": {
      "class": "range-filter__label",
      "text": "Maximum value"
    },
    "field": {
      "class": "range-filter__field range-filter__field--upper",
      "id": "range-filter-max",
      "name": "range-filter-max",
      "placeholder": "",
      "value": "1000"
    }
  },
  "apply": {
    "class": "range-filter__button button--fluid margin-vc-sm",
    "tag": "button",
    "text": "Apply",
    "attributes": "type=\"button\" data-min=\"0\" data-max=\"1000\" data-attribute=\"price\" href=\"#\" data-filter-url=\"#\""
  },
  "script": true,
  "showFloat": 0
}
  • Content: 
    $range__padding               : $spacer--medium $spacer--extra-small 0 0 !default;
$range__padding\@large        : $spacer--medium 0 0 0 !default;
$range__slider-margin         : 0 0 $spacer--semi-large 0 !default;
$range__handler-size          : 24px !default;
$range__handler-bg-color      : $white !default;
$range__handler-border        : $border-secondary !default;
$range__handler-border-radius : 50% !default;
$range__handler-box-shadow    : none !default;
$range__handler-offset-top    : -10px !default;
$range__track-height          : $spacer--extra-small !default;
$range__track-bg-color        : $gray !default;
$range__track-bg-color--active: $color-primary !default;
$range__track-border-radius   : $border-radius !default;
$range__track-border          : none !default;
$range__track-box-shadow      : none !default;
$range__dash-padding          : 0 $spacer--medium 0 $spacer !default;
$range__suffix-padding        : 0 $spacer !default;
$range__button-width          : calc(100% - #{$spacer--extra-small}) !default;
$range__button-width\@large   : 100% !default;

.range-filter {
    padding: $range__padding;
    overflow: hidden;
    @include mq($screen-l) {
        padding: $range__padding\@large;
    }

    &__slider {
        margin: $range__slider-margin;
    }

    &__inputs-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &__dash {
        text-align: center;
        padding: $range__dash-padding;
    }

    &__suffix {
        padding: $range__suffix-padding;
    }

    &__label {
        @include visually-hidden();
    }

    &__input {
        width: auto;
        flex-grow: 1;
        margin: 0;
    }
    &__button {
        width: $range__button-width;
        @include mq($screen-l) {
            width: $range__button-width\@large;
        }
    }
}

.noUi-connect {
    background-color: $range__track-bg-color--active;
    border-radius: 0;
}

.noUi-tooltip {
    display: none;
}

.noUi-target {
    background-color: $range__track-bg-color;
    box-shadow: $range__track-box-shadow;
    border: $range__track-border;
    border-radius: $range__track-border-radius;
    height: $range__track-height;
}

.noUi-handle {
    &:hover {
        cursor: pointer;
    }

    .noUi-horizontal & {
        border-radius: $range__handler-border-radius;
        background-color: $range__handler-bg-color;
        width: $range__handler-size;
        height: $range__handler-size;
        border: $range__handler-border;
        box-shadow: $range__handler-box-shadow;
        top: $range__handler-offset-top;

        &:before,
        &:after {
            display: none;
        }

        &.focus-visible {
            .noUi-tooltip {
                display: block;
            }
        }
    }
}

.noUi-extended {
    padding-right: $spacer--semi-medium;
}

.noUi-extended .noUi-handle {
    right: -24px;
}
  • URL: /components/raw/range/_range.scss
  • Filesystem Path: build/components/Organisms/range/_range.scss
  • Size: 2.9 KB
  • Content: 
    /* global noUiSlider */
(function rangeSlider() {
  'use strict';

  function init() {
    const rangeFilters = [...document.querySelectorAll('.range-filter')];
    rangeFilters.forEach(rangeFilter => {
      createRangeSlider(rangeFilter);
    });
  }

  function createRangeSlider(rangeFilter) {
    const inputMax = rangeFilter.querySelector('.range-filter__field--upper');
    const inputMin = rangeFilter.querySelector('.range-filter__field--lower');
    const rangeSlider = rangeFilter.querySelector('.range-filter__slider');

    rangeSlider.classList.add('noUi-extended');
    initNoUiSlider(rangeSlider);
    bindEvents(rangeSlider, inputMin, inputMax);
  }

  function initNoUiSlider(rangeSlider) {
    let minValue = parseInt(rangeSlider.getAttribute('data-min'));
    let maxValue = parseInt(rangeSlider.getAttribute('data-max'));

    if (!minValue) {
      minValue = 0;
    }
    if (!maxValue) {
      maxValue = 1000;
    }

    noUiSlider.create(rangeSlider, {
      start: [minValue, maxValue],
      connect: true,
      step: 1,
      range: {
        'min': minValue,
        'max': maxValue
      }
    });
  }

  function bindEvents(rangeSlider, inputMin, inputMax) {
    const showFloat = parseInt(rangeSlider.getAttribute('data-show-float'));

    rangeSlider.noUiSlider.on('update', (values) => {
      if (showFloat) {
        inputMin.value = values[0];
        inputMax.value = values[1];
      }
      else {
        inputMin.value = parseInt(values[0]);
        inputMax.value = parseInt(values[1]);
      }
    });

    inputMax.addEventListener('change', (event) => {
      rangeSlider.noUiSlider.set([null, event.target.value]);
    });

    inputMin.addEventListener('change', (event) => {
      rangeSlider.noUiSlider.set([event.target.value, null]);
    });
  }

  init();

}());
  • URL: /components/raw/range/range.js
  • Filesystem Path: build/components/Organisms/range/range.js
  • Size: 1.8 KB

No notes defined.