<div class="filter ">
<h3 class="filter__title">
Prijs
</h3>
<div class="range-filter filter__range">
<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>
<div class="filter {{ class }}">
{{ render '@heading' title }}
{{ text }}
{{#if componentObject }}
{{ render (component componentObject.name) componentObject.config }}
{{/if }}
</div>
{
"icon": {
"id": "angle-down",
"title": "Arrow down",
"class": "dropdown-list__icon"
},
"id": "range",
"title": {
"class": "filter__title",
"tag": "h3",
"text": "Prijs"
},
"componentObject": {
"name": "range",
"config": {
"attributes": "",
"class": "filter__range",
"filter": {
"wrapperClass": "",
"input": {
"upperClass": "",
"lowerClass": "",
"maxValue": "1000",
"minValue": "0",
"type": "text"
},
"suffix": {
"lowerText": "€",
"upperText": "tot",
"lowerClass": "",
"upperClass": ""
}
},
"rangeInputLower": {
"class": "range-filter__input range-filter__input--lower",
"label": {
"class": "range-filter__label",
"text": "€"
},
"field": {
"class": "range-filter__field range-filter__field--lower",
"id": "range-filter-min",
"name": "range-filter-min",
"placeholder": "",
"value": "40"
}
},
"rangeInputUpper": {
"class": "range-filter__input range-filter__input--upper",
"label": {
"class": "range-filter__label",
"text": "tot"
},
"field": {
"class": "range-filter__field range-filter__field--upper",
"id": "range-filter-max",
"name": "range-filter-max",
"placeholder": "",
"value": "750"
}
},
"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
}
}
}
.filter {
margin: $spacer 0;
&__title {
font-family: $font-family-saira;
font-weight: 500;
font-size: $font-size-base;
color: #808080;
margin: 0 0 $spacer 0;
transition: $transition-base;
line-height: 165%;
display: flex;
justify-content: flex-start;
}
&__category-list {
margin: 0 0 $spacer 0;
&--nested {
margin: 0 0 0 $spacer--large;
}
&--nested-second-level {
margin: 0 0 0 #{$spacer--large * 2};
}
}
&__category-item {
padding: 0;
}
&__category-link {
display: block;
padding: 14px 0;
color: $color-secondary;
&:hover,
&:focus {
text-decoration: underline;
}
}
&__list {
display: flex;
flex-wrap: wrap;
flex-direction: row;
&--swatches {
flex-direction: row;
}
&--select {
flex-direction: row;
width: 100%;
& .label {
display: none;
}
& .select__field {
color: rgba(0, 0, 0, 0.3);
}
}
}
&__swatch-item {
margin: 0 $spacer $spacer--medium $spacer;
@include mq($screen-l) {
display: flex;
justify-content: center;
flex-basis: 20%;
margin: 0 0 $spacer--medium 0;
}
}
&__swatch-option {
display: flex;
justify-content: center;
align-items: center;
min-width: 48px;
min-height: 48px;
border: 3px solid $white;
background-color: $white;
color: $gray-dark;
transition: $transition-base;
cursor: pointer;
text-decoration: none;
&:hover,
&:focus {
text-decoration: none;
border-color: $color-primary;
}
&--active {
border-color: $color-primary;
}
}
&__color-item {
margin: 0 $spacer;
@include mq($screen-l) {
display: flex;
justify-content: center;
flex-basis: 20%;
margin: 0 0 $spacer 0;
}
}
&__color-option {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 42px;
width: 42px;
height: 42px;
max-height: 42px;
text-decoration: none;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 42px;
height: 42px;
background-color: transparent;
border: 2px solid transparent;
border-radius: 0;
transition: $transition-base;
}
&--active,
&:hover,
&:focus {
text-decoration: none;
&:after {
border-color: $color-primary;
}
}
}
&__color-sample {
width: 34px;
height: 34px;
border-radius: 3px;
box-shadow: inset 0 0 3px #e5e5e5;
}
&__range {
margin: 0 0 $spacer--medium 0;
}
& .range-filter {
&__button {
display: none;
}
}
& .actions {
& .action {
cursor: pointer;
}
}
}
There are no notes for this item.