No notes defined.
<!-- Default -->
<div class="sds-range">
<div class="sds-range__body">
<input type="range" class="custom-range" id="range-input-1" value="12" min="10" max="24">
</div>
<div class="sds-range__footer">
<span class="sds-range__min">
<span>10</span>
</span>
<span class="sds-range__max">
<span>24</span>
</span>
</div>
</div>
<!-- Has Indicator -->
<div class="sds-range -hasIndicator">
<div class="sds-range__body">
<input type="range" class="custom-range" id="range-input-indicator" value="12" min="10" max="24">
<div class="sds-range__indicator">
<span>12</span>
</div>
</div>
<div class="sds-range__footer">
<span class="sds-range__min">
<span>10</span>
</span>
<span class="sds-range__max">
<span>24</span>
</span>
</div>
</div>
<!-- Fixed Variable Rate -->
<div class="sds-range -rate">
<div class="sds-range__body">
<input type="range" class="custom-range" id="range-input-rate" value="17" min="10" max="24">
</div>
<div class="sds-range__footer">
<span class="sds-range__min">
<span>50%</span> <span>fixe</span>
</span>
<span class="sds-range__max">
<span>50%</span> <span>variable</span>
</span>
</div>
<div class="sds-range__rates">
<div class="row row-sm">
<div class="col-6">
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="250.000€" readonly>
</div>
</div>
<div class="col-6">
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="250.000€" readonly>
</div>
</div>
</div>
</div>
</div>
<!-- Disabled -->
<div class="sds-range -hasIndicator">
<div class="sds-range__body">
<input type="range" class="custom-range" id="range-input-disabled" value="3" min="0" max="15" disabled>
<div class="sds-range__indicator">
<span>3</span>
</div>
</div>
</div>
<div class="{{ namespace }}range{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}range__body">
<input type="range" class="custom-range" id="{{ id }}" value="{{ currentValue }}" min="{{ minValue }}" max="{{ maxValue }}"{% if disabled %} disabled{% endif %}>
{% if hasIndicator %}
<div class="{{ namespace }}range__indicator">
<span>{{ currentValue }}</span>{{ indicatorValueType }}
</div>
{% endif %}
</div>
{% if footer %}
<div class="{{ namespace }}range__footer">
<span class="{{ namespace }}range__min">
<span>{{ minValueText }}</span>{% if rate %} <span>fixe</span>{% endif %}
</span>
<span class="{{ namespace }}range__max">
<span>{{ maxValueText }}</span>{% if rate %} <span>variable</span>{% endif %}
</span>
</div>
{% endif %}
{% if rate %}
<div class="{{ namespace }}range__rates">
<div class="row row-sm">
<div class="col-6">
{% render "@input--readonly",{value: "250.000€"},true %}
</div>
<div class="col-6">
{% render "@input--readonly",{value: "250.000€"},true %}
</div>
</div>
</div>
{% endif %}
</div>
export default class RangeInput {
constructor() {
this.fillTrackColor();
}
fillTrackColor() {
const rangeInputs = document.querySelectorAll("input[type='range']");
function defineRangebehaviour (el) {
let styles = getComputedStyle(el);
let progressColor = styles.getPropertyValue('--custom-range-progress-color');
let trackColor = styles.getPropertyValue('--custom-range-track-color');
let percent = (100 * (el.value - el.min)) / (el.max - el.min) + "%";
let indicator = el.parentNode.querySelector(".sds-range__indicator span");
el.style.backgroundImage = `linear-gradient( to right, ${progressColor}, ${progressColor} ${percent}, ${trackColor} ${percent})`;
if(indicator) {
indicator.textContent = el.value;
indicator.parentNode.style.left = `calc(${percent})`;
indicator.parentNode.style.transform = `translateX(-${percent})`;
}
}
rangeInputs.forEach((el, i) => {
defineRangebehaviour(el)
})
rangeInputs.forEach((el, i) => {
el.addEventListener("input", function () {
defineRangebehaviour(el)
});
})
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}range {
/* are only defined without being declared anywhere because they are purely a JS hook */
--custom-range-progress-color: var(--comp-range-knob-background-color);
--custom-range-track-color: var(--comp-range-background-color);
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
LABEL {
margin-bottom: 0;
}
// range__header
&__header {
// follows same logic as parent
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: map-get($spacers, 4);
font-weight: 600;
}
&__body {
height: $custom-range-thumb-height;
display: flex;
align-items: center;
position: relative;
}
&__indicator {
position: absolute;
top: -$custom-range-thumb-height*1.75;
text-align: center;
white-space: nowrap;
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
SPAN {
@include custom-prop-fallback("color", "sys-color-text-primary-contrast");
}
}
&__value {
SPAN {
margin-right: map-get($spacers, 4);
}
}
&__footer {
display: flex;
justify-content: space-between;
margin-top: map-deep-get($token-spacer-stack-max-map, "xs");
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
@extend %textHelper;
}
&__rates {
margin-top: map-deep-get($token-spacer-stack-max-map, "sm");
}
INPUT[type="range"] {
&[disabled] {
--custom-range-progress-color: var(--sys-color-background-neutral-100);
--custom-range-track-color: var(--comp-range-disabled-background-color);
~ #{$self}__indicator {
@include custom-prop-fallback("color", "sys-color-text-neutral-vivid");
SPAN {
@include custom-prop-fallback("color", "sys-color-text-neutral-vivid");
}
}
}
}
/* modifiers */
// range -altStyle
&.-hasIndicator {
// follows same logic as base element
#{$self}__body {
margin-top: $custom-range-thumb-height*1.75;
}
}
&.-rate {
--custom-range-progress-color: var(--sys-color-background-status-success-120);
--custom-range-track-color: var(--sys-color-background-highlight-60);
#{$self}__min {
color: var(--custom-range-progress-color);
}
#{$self}__max {
color: var(--custom-range-track-color);
}
}
&.-alignToInput {
@extend .form-control;
border-bottom: 0;
display: flex;
width: 100%;
align-items: flex-end;
padding: 0;
#{$self}__body {
width: 100%;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}