<div style="" class="RangeSlider js-rangeslider" data-low-label="Very Dissatisfied" data-high-label="Very Satisfied">
<div>
<div class="RangeSlider-labels">
<div class="spacedout fineprint">
Very Dissatisfied
</div>
<div class="spacedout fineprint" style="text-align: right;">
Very Satisfied
</div>
</div>
<input type="range" name="" aria-label=" from to 10" step="1" min="" max="10" value="" />
</div>
</div>
<div
style="{{style}}"
class="RangeSlider {{modifier}} js-rangeslider"
data-low-label="{{lowLabel}}"
data-high-label="{{highLabel}}"
>
<div>
<div class="RangeSlider-labels">
<div class="spacedout fineprint">
{{lowLabel}}
</div>
<div class="spacedout fineprint" style="text-align: right;">
{{highLabel}}
</div>
</div>
<input
type="range"
name="{{name}}"
aria-label="{{ariaLabel}} from {{min}} to {{max}}"
step="{{step}}"
min="{{min}}"
max="{{max}}"
value="{{inputValue}}"
{{#if autofocus}}autofocus{{/if}}
{{#if autocomplete}}autocomplete{{/if}}
{{#if disabled}}disabled{{/if}}
{{#if required}}required{{/if}}
/>
</div>
</div>
{
"lowLabel": "Very Dissatisfied",
"highLabel": "Very Satisfied",
"labelText": "Satisfaction",
"min": null,
"max": 10,
"step": 1
}
import PropTypes from 'prop-types';
import React from 'react';
const RangeSlider = ({
ariaLabel = '',
highLabel = '',
indicatorId = null,
lowLabel = '',
max = 10,
min = 0,
name = '',
onChange = null,
step = 1,
value = 5,
disabled,
required,
autoFocus,
autoComplete
})=> {
const valueProp = {};
if (onChange) {
valueProp.value = value;
} else {
valueProp.defaultValue = value;
}
const labels = lowLabel && highLabel && (
<div className="RangeSlider-labels">
<div className="spacedout fineprint">
{lowLabel}
</div>
<div className="spacedout fineprint" style={{textAlign: 'right'}}>
{highLabel}
</div>
</div>
);
return (
<div className="RangeSlider">
{labels}
<input
aria-controls={indicatorId}
aria-label={ariaLabel}
max={max}
min={min}
name={name}
onChange={onChange}
step={step}
type="range"
disabled={disabled}
required={required}
autoFocus={autoFocus}
autoComplete={autoComplete}
{...valueProp}
/>
</div>
);
};
RangeSlider.propTypes = {
ariaLabel: PropTypes.string,
highLabel: PropTypes.string,
indicatorId: PropTypes.string,
lowLabel: PropTypes.string,
max: PropTypes.number,
min: PropTypes.number,
name: PropTypes.string,
onChange: PropTypes.func,
step: PropTypes.number,
value: PropTypes.number,
disabled: PropTypes.bool,
required: PropTypes.bool,
autoFocus: PropTypes.bool,
autoComplete: PropTypes.string
};
export default RangeSlider;
@import "../../Axioms";
$RangeSlider-track-color: get-color(neutral, 500);
$RangeSlider-progress-color: linear-gradient(to right, get-color(aqua, 800), get-color(teal, 700), get-color(green, 600), get-color(green, 500)) !default;
$RangeSlider-height: 10px !default;
$RangeSlider-thumb-color: theme-color(main) !default;
$RangeSlider-thumb-size: 30px !default;
@mixin sproutline {
outline: 0;
&:focus {
box-shadow: 0 0 0 pxToRem(2px) get-color(neutral, 0), 0 0 0 pxToRem($button-border-width + 2px) theme-color(main);
}
}
@mixin track {
width: 100%;
height: $RangeSlider-height;
border-radius: $RangeSlider-height / 2;
outline: 0;
cursor: pointer;
}
@mixin thumb {
@include Elevation(Button-hover, $withZindex: true);
position: relative;
width: $RangeSlider-thumb-size;
height: $RangeSlider-thumb-size;
background: $RangeSlider-thumb-color;
border-radius: 50%;
outline: 0;
cursor: pointer;
}
.RangeSlider {
display: block;
}
.RangeSlider-labels {
display: flex;
justify-content: space-between;
}
.RangeSlider-indicator-wrapper {
position: relative;
}
.RangeSlider-indicator {
@include triangle-dingus(left, center, 5px, theme-color(background, dark));
position: absolute;
right: -60px;
bottom: 5px;
left: auto;
z-index: 5;
width: 40px;
padding: .25rem .5rem;
font-size: $font-size-small;
color: theme-color(text, inverse);
text-align: center;
background: theme-color(background, dark);
border-radius: $Border-radius--500;
cursor: default;
}
[type="range"] {
@include sproutline;
width: 100%;
margin: $RangeSlider-thumb-size / 2 0;
appearance: none;
border-radius: $RangeSlider-height / 2;
/**
* Thumb styles
*/
&::-webkit-slider-thumb {
@include thumb;
margin-top: (($RangeSlider-height) / 2) - ($RangeSlider-thumb-size / 2);
appearance: none;
}
&::-moz-range-thumb {
@include thumb;
}
&::-ms-thumb {
@include thumb;
margin-top: 0;
}
/**
* Regular track background
*/
&::-webkit-slider-runnable-track {
@include track;
background: $RangeSlider-progress-color;
}
&::-moz-range-track {
@include track;
background: $RangeSlider-track-color;
}
&::-ms-track,
&::-ms-fill-upper {
@include track;
background: $RangeSlider-track-color;
}
/**
* Progress background for browsers that support it
*/
&::-moz-range-progress {
@include track;
background: $RangeSlider-progress-color;
}
&::-ms-fill-lower {
background: $RangeSlider-progress-color;
}
}
There are no notes for this item.