Range Inputs Horizontally scrollable range inputs.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                form: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<label for="range" class="form-label">Example range</label>
<input id="range" type="range" class="form-range" />
NameDescription
.form-rangeBase class of the component
Customize variables at:/library/extend/components/_form.scss
Component's defaults:/library/components/form/_defaults.scss
NameDefault valueNote
$form-text-margin-top.25rem
$form-text-font-size$small-font-size
$form-text-font-stylenull
$form-text-font-weightnull
$form-text-color$text-muted
$form-label-margin-bottom.5rem
$form-label-font-sizenull
$form-label-font-stylenull
$form-label-font-weightnull
$form-label-colornull
$input-padding-y.532rem
$input-padding-x.75rem
$input-font-familynull
$input-font-size$font-size-base
$input-font-weight$font-weight-normal
$input-line-height1.5
$input-border-radius$border-radius
$input-border-width1px
$input-height-border$input-border-width * 2
$input-heightadd($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false))
$input-height-inneradd($input-line-height * 1em, $input-padding-y * 2)
$input-height-inner-halfadd($input-line-height * .5em, $input-padding-y)
$input-height-inner-quarteradd($input-line-height * .25em, $input-padding-y / 2)
$input-transitionborder-color .15s ease-in-out, box-shadow .15s ease-in-out
$input-icon-size22px;
$input-placeholder-colorproperty.get(form-input-placeholder-color)Requires @use "@library/sass/modules/property";
$input-padding-y-lg0.688rem
$input-padding-x-lg1rem
$input-font-size-lg$font-size-lg
$input-border-radius-lg$border-radius-lg
$input-height-lgadd($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false))
$input-icon-size-lg26px;
$input-padding-y-sm0.282rem
$input-padding-x-sm.75rem
$input-font-size-sm$font-size-sm
$input-border-radius-sm$border-radius-sm
$input-height-smadd($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false))
$input-icon-size-sm18px;
$input-padding-y-xsm0.125rem
$input-padding-x-xsm0.5rem
$input-font-size-xsm$font-size-xsm
$input-border-radius-xsm$border-radius-xsm
$input-height-xsmadd($input-line-height * 1em, add($input-padding-y-xsm * 2, $input-height-border, false))
$input-line-height-xsm1.5;
$input-icon-size-xsm12px;
$input-bgproperty.get(form-input-bg)Requires @use "@library/sass/modules/property";
$input-colorproperty.get(form-input-text-color)Requires @use "@library/sass/modules/property";
$input-border-colorproperty.get(form-input-border)Requires @use "@library/sass/modules/property";
$input-box-shadow0 0 0 0 transparent
$input-plaintext-color$input-color
$input-disabled-bgproperty.get(form-input-disabled-bg)Requires @use "@library/sass/modules/property";
$input-disabled-colorproperty.get(form-input-disabled-text-color)Requires @use "@library/sass/modules/property";
$input-disabled-border-colornull
$input-hover-bgproperty.get(form-input-hover-bg)Requires @use "@library/sass/modules/property";
$input-hover-border-colorproperty.get(form-input-hover-border)Requires @use "@library/sass/modules/property";
$input-hover-colorproperty.get(form-input-hover-text-color)Requires @use "@library/sass/modules/property";
$input-hover-box-shadowproperty.get(form-input-hover-box-shadow)Requires @use "@library/sass/modules/property";
$input-focus-bgproperty.get(form-input-focus-bg)Requires @use "@library/sass/modules/property";
$input-focus-border-colorproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$input-focus-colorproperty.get(form-input-focus-text-color)Requires @use "@library/sass/modules/property";
$input-focus-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow)Requires @use "@library/sass/modules/property";
$input-focus-width.25rem
$input-group-addon-padding-y$input-padding-y
$input-group-addon-padding-x$input-padding-x
$input-group-addon-font-weight$input-font-weight
$input-group-addon-colorproperty.get(form-input-group-text-color)Requires @use "@library/sass/modules/property";
$input-group-addon-border-colorproperty.get(form-input-group-text-border-color)Requires @use "@library/sass/modules/property";
$input-group-addon-subtle-colorproperty.get(form-input-group-text-subtle-color)Requires @use "@library/sass/modules/property";
$input-group-addon-subtle-border-colorproperty.get(form-input-group-text-subtle-border-color)Requires @use "@library/sass/modules/property";
$form-check-input-width1em
$form-check-min-height$font-size-base * $line-height-base
$form-check-padding-start$form-check-input-width + .5em
$form-check-margin-bottom.125rem
$form-check-label-colornull
$form-check-label-cursornull
$form-check-transitionbackground-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
$form-check-input-active-filterbrightness(90%)
$form-check-input-bgtransparent
$form-check-input-border2px solid property.get(ui-base-color-6)Requires @use "@library/sass/modules/property";
$form-check-input-border-radius2px
$form-check-radio-border-radius50%
$form-check-input-hover-borderproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-focus-border$input-focus-border-color
$form-check-input-focus-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow)Requires @use "@library/sass/modules/property";
$form-check-input-checked-bg-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-checked-border-color$form-check-input-checked-bg-color
$form-check-input-checked-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.62818 14.6338C7.21344 15.1221 6.54349 15.1221 6.12875 14.6338L2.31105 10.1393C1.89632 9.65102 1.89632 8.86229 2.31105 8.37402C2.72579 7.88576 3.39575 7.88576 3.81048 8.37402L6.87315 11.9797L14.1895 3.3662C14.6043 2.87793 15.2742 2.87793 15.6889 3.3662C16.1037 3.85446 16.1037 4.64319 15.6889 5.13146L7.62818 14.6338Z" fill="#{theme.get(default, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-input-checked-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.62818 14.6338C7.21344 15.1221 6.54349 15.1221 6.12875 14.6338L2.31105 10.1393C1.89632 9.65102 1.89632 8.86229 2.31105 8.37402C2.72579 7.88576 3.39575 7.88576 3.81048 8.37402L6.87315 11.9797L14.1895 3.3662C14.6043 2.87793 15.2742 2.87793 15.6889 3.3662C16.1037 3.85446 16.1037 4.64319 15.6889 5.13146L7.62818 14.6338Z" fill="#{theme.get(alt, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-radio-checked-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z" fill="none" stroke="#{theme.get(default, true, main-background-color)}" stroke-width="3"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-radio-checked-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z" fill="none" stroke="#{theme.get(alt, true, main-background-color)}" stroke-width="3"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-input-indeterminate-bg-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-indeterminate-border-color$form-check-input-indeterminate-bg-color
$form-check-input-indeterminate-bg-imageurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{theme.get(default, true, main-background-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>")Requires @use "@library/sass/modules/theme";
$form-check-input-indeterminate-bg-image-alturl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{theme.get(alt, true, main-background-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>")Requires @use "@library/sass/modules/theme";
$form-check-input-disabled-opacity.5
$form-check-label-disabled-opacity$form-check-input-disabled-opacity
$form-check-btn-check-disabled-opacity.65
$form-switch-width2em
$form-switch-padding-start$form-switch-width + .5em
$form-switch-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="9" fill="#{theme.get(default, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-switch-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="9" fill="#{theme.get(alt, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-switch-border-radius$form-switch-width
$form-switch-focus-bg-image$form-switch-bg-image
$form-switch-focus-bg-image-alt$form-switch-bg-image-alt
$form-switch-checked-bg-image$form-switch-bg-image
$form-switch-checked-bg-image-alt$form-switch-bg-image-alt
$form-switch-checked-bg-positionright center
$form-check-inline-margin-end1rem
$form-select-padding-y$input-padding-y
$form-select-padding-x$input-padding-x
$form-select-font-family$input-font-family
$form-select-font-size$input-font-size
$form-select-font-weight$input-font-weight
$form-select-line-height$input-line-height
$form-select-color$input-color
$form-select-disabled-color$gray-600
$form-select-bg$input-bg
$form-select-disabled-bg$gray-200
$form-select-disabled-border-color$input-disabled-border-color
$form-select-bg-positionright $form-select-padding-x center
$form-select-indicator-colortheme.get(default, true, form-input-select-indicator-color)Requires @use "@library/sass/modules/theme";
$form-select-indicator-svgstring.replace($form-select-indicator-svg, '$opacity', 1);Requires @use "@library/sass/modules/string";
$form-select-indicatorurl("data:image/svg+xml,#{$form-select-indicator-svg}")
$form-select-feedback-icon-padding-endadd(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding)
$form-select-feedback-icon-positioncenter right ($form-select-padding-x + $form-select-indicator-padding)
$form-select-feedback-icon-size$input-height-inner-half $input-height-inner-half
$form-select-border-width$input-border-width
$form-select-border-color$input-border-color
$form-select-border-radius$border-radius
$form-select-box-shadow0 0 0 transparent
$form-select-focus-border-color$input-focus-border-color
$form-select-focus-width$input-focus-width
$form-select-focus-box-shadow0 0 0 $form-select-focus-width $input-btn-focus-color
$form-select-padding-y-sm$input-padding-y-sm
$form-select-padding-x-sm$input-padding-x-sm
$form-select-font-size-sm$input-font-size-sm
$form-select-padding-y-lg$input-padding-y-lg
$form-select-padding-x-lg$input-padding-x-lg
$form-select-font-size-lg$input-font-size-lg
$form-range-track-width100%
$form-range-track-height6px
$form-range-track-cursorpointer
$form-range-track-bgproperty.get(ui-base-color-5)Requires @use "@library/sass/modules/property";
$form-range-track-border-radius1rem
$form-range-track-box-shadow$box-shadow-inset
$form-range-thumb-width16px
$form-range-thumb-height$form-range-thumb-width
$form-range-thumb-bgproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$form-range-thumb-border0
$form-range-thumb-border-radius1rem
$form-range-thumb-box-shadow0 .1rem .25rem rgba($black, .1)
$form-range-thumb-focus-box-shadow$input-focus-box-shadow
$form-range-thumb-active-bgproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$form-range-thumb-disabled-bg$gray-500
$form-range-thumb-transitionbackground-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
$form-file-button-color$input-color
$form-floating-heightadd(3.5rem, $input-height-border)
$form-floating-padding-x$input-padding-x
$form-floating-padding-y1rem
$form-floating-input-padding-t1.625rem
$form-floating-input-padding-b.625rem
$form-floating-label-opacity.65
$form-floating-label-transformscale(.85) translateY(-.5rem) translateX(.15rem)
$form-floating-transitionopacity .1s ease-in-out, transform .1s ease-in-out
$form-feedback-margin-top$form-text-margin-top
$form-feedback-font-size12px
$form-feedback-font-style$form-text-font-style
$form-feedback-valid-color$success
$form-feedback-invalid-color$danger
$form-feedback-icon-valid-colortheme.get(default, true, state-ok-color)Requires @use "@library/sass/modules/theme";
$form-feedback-icon-validurl('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM7.5 12.75L3.75 9L4.8075 7.9425L7.5 10.6275L13.1925 4.935L14.25 6L7.5 12.75Z" fill="#{$form-feedback-icon-valid-color}"/></svg>')
$form-feedback-icon-invalid-colortheme.get(default, true, state-error-color)Requires @use "@library/sass/modules/theme";
$form-feedback-icon-invalidurl('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.5C4.8525 1.5 1.5 4.8525 1.5 9C1.5 13.1475 4.8525 16.5 9 16.5C13.1475 16.5 16.5 13.1475 16.5 9C16.5 4.8525 13.1475 1.5 9 1.5ZM12.75 11.6925L11.6925 12.75L9 10.0575L6.3075 12.75L5.25 11.6925L7.9425 9L5.25 6.3075L6.3075 5.25L9 7.9425L11.6925 5.25L12.75 6.3075L10.0575 9L12.75 11.6925Z" fill="#{$form-feedback-icon-invalid-color}"/></svg>')

Make sure to read the Customize components and Understanding and using the design system guides.

{title}