Range

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="range-filter ">

    <div class="smile-es-range-slider" data-role="range-price-slider-price">
        <div class="range-filter__labels">
            <div data-role="from-label">€ 10</div>
            <div data-role="to-label">€ 150</div>
        </div>

        <div data-role="slider-bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
            <div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div>
            <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
            <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
        </div>

        <div class="actions-toolbar">
            <div data-role="message-box">12 producten</div>
            <div class="actions-primary">
                <a class="action primary button button--secondary" data-role="apply-range">
                    <span>Filteren</span>
                </a>
            </div>
        </div>
    </div>
</div>
<script src="/components/raw/range/range.js"></script>


        <div class="range-filter {{ class }}" {{{ attributes }}}>
    
    <div class="smile-es-range-slider" data-role="range-price-slider-price">
        <div class="range-filter__labels">
             <div data-role="from-label">€ 10</div>
            <div data-role="to-label">€ 150</div>
        </div>
       
        <div data-role="slider-bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
            <div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div>
            <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
            <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
        </div>

        <div class="actions-toolbar">
            <div data-role="message-box">12 producten</div>
            <div class="actions-primary">
                <a class="action primary button button--secondary" data-role="apply-range">
                    <span>Filteren</span>
                </a>
            </div>
        </div>
    </div>
</div>
{{#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": "button--secondary range-filter__button",
    "tag": "button",
    "text": "Apply",
    "attributes": "type=\"button\" data-min=\"0\" data-max=\"1000\" data-attribute=\"price\" href=\"#\" data-filter-url=\"#\""
  },
  "script": true,
  "showFloat": 0
}

File:

Content:


                                $range__padding               : $spacer--medium 0 0 0 !default;
$range__margin                : 0 0 $spacer--medium 0 !default;
$range__height                : 8px !default;
$range__input-margin          : 0 $spacer !default;
$range__connect-border-radius : 0 !default;
$range__handler-width         : 24px !default;
$range__handler-height        : 24px !default;
$range__handler-bg-color      : $white !default;
$range__handler-border        : none !default;
$range__handler-border-radius : 50% !default;
$range__handler-box-shadow    : 0 2px 4px 0 rgba(51, 51, 51, 0.5) !default;
$range__handler-offset-top    : -1 * $range__height !default;
$range__track-bg-color        : #f6f6f6 !default;
$range__track-bg-color--active: $color-primary !default;
$range__track-border-radius   : $border-radius;
$range__track-border          : none !default;
$range__track-box-shadow      : none !default;
$range__dash-padding          : 0 $spacer--medium 0 $spacer !default;
$range__suffix-padding        : 0 !default;
$range__button-padding        : 0 $spacer--extra-large !default;
$range__button-margin         : 0 0 $spacer--medium 0 !default;

.range-filter {
    padding: $range__padding;
    overflow: hidden;
    &__slider {
        margin: $range__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;

        font-family: $font-family-saira;
        font-size: $font-size-base;
        color: #808080;
    }
    &__label {
        @include visually-hidden();
    }
    &__input {
        width: auto;
        flex-grow: 1;
        margin: $range__input-margin;
    }
    &__field {
        color: #acacac;
        border-radius: $border-radius--small;
        background: #f6f6f6;
        border: none;
        padding: 0 0 0 16px;
    }
    &__button {
        margin: $range__button-margin;
        padding: $range__button-padding;
    }

    &__labels {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        padding: 0 0 5px;
        font-family: $font-family-saira;
    }

    .smile-es-range-slider .ui-slider {
        margin: 5px;
        clear: both;
    }

    .ui-slider-horizontal {
        height: 10px;
        border-radius: 10px;
        border: none;
        background: $gray-light;
    }

    .ui-slider {
        position: relative;
        text-align: left;
    }

    .smile-es-range-slider .actions-toolbar {
        display: flex;
        margin: 15px 0;
        justify-content: space-between;
        align-items: center;
        font-family: $font-family-saira;
    }

    .smile-es-range-slider .ui-slider-handle {
        display: inline-flex;
        padding: 0;
        margin: -3px 0 0 -7px;
        width: 24;
        height: 24px;

        border-radius: 50%;
        background: $white;
        border: 4px solid $color-primary;
        box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.5);
    }
}
.noUi-connect {
    background-color: $range__track-bg-color--active;
    border-radius: $range__connect-border-radius;
}
.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__height;
}
.noUi-handle {
    &:hover {
        cursor: pointer;
    }
    .noUi-horizontal & {
        border-radius: $range__handler-border-radius;
        background: $range__handler-bg-color;
        width: $range__handler-width;
        height: $range__handler-height;
        border: $range__handler-border;
        box-shadow: $range__handler-box-shadow;
        top: $range__handler-offset-top;
        &:before,
        &:after {
            display: none;
        }
        &:focus {
            outline: none;

            .noUi-tooltip {
                display: block;
            }
        }
    }
}
.noUi-extended {
    padding-right: 24px;
}
.noUi-extended .noUi-handle {
    left: 0;
    border: 4px solid $red;
}
.noUi-extended .noUi-origin  {
    right: -24px;
}

URL: /components/raw/range/_range.scss
Filesystem Path: build/components/03-modules/range/_range.scss
Size: 4.2 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'),
          inputMin = rangeFilter.querySelector('.range-filter__field--lower'),
          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')),
        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/03-modules/range/range.js
Size: 1.8 KB

Handle: @range
Preview:
- With layout
- Component only
Filesystem Path: build/components/03-modules/range/range.hbs

There are no notes for this item.