<div class="form-range-slider bgtransparent" id="ageRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="ageRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuál es tu edad" min='18' max='74' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
18 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
74 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
<div class="form-range-slider{{#if isBGTransparent}} bgtransparent{{/if}}{{#if isBGAccentLight}} bgaccentlight{{/if}}{{#if isError}} error{{/if}}" id="{{ id }}">
{{> @field-top field-top }}
{{> @range-slider range-slider }}
{{> @field-bottom field-bottom }}
</div>
{
"field-top": {
"label": {
"text": "Field Text"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "ageRangeSlider",
"range-slider": {
"id": "ageRangeInput",
"inputTitle": "Cuál es tu edad",
"validationAttributes": "min='18' max='74' data-default='30'",
"symbol": {
"text": "años"
},
"legend-start": {
"text": "18 años"
},
"legend-end": {
"text": "74 años"
}
},
"isBGTransparent": true
}
.form-range-slider {
margin-bottom: 20px;
width: 100%;position: relative;
.range-slider__fieldset{
display: flex;flex-direction: row;justify-content: flex-end;align-items: flex-end;
position: relative;background-color: var(--color-white);
border: 1px solid var(--color-grey3);
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
&.bgtransparent{
.range-slider__fieldset{
background: transparent;
}
}
&.bgaccentlight{
.range-slider__fieldset{
background-color: var(--color-accent-light);
border-color: var(--color-accent-light);
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
}
&.error{
.range-slider__fieldset{
border-color: var(--color-border-error);
&:hover,
&:focus {
border-color: var(--color-border-error);
}
}
}
}
No notes defined.