diff --git a/js/foundation/foundation.slider.js b/js/foundation/foundation.slider.js index 0c26602afc..c9474c08fd 100644 --- a/js/foundation/foundation.slider.js +++ b/js/foundation/foundation.slider.js @@ -30,7 +30,7 @@ $(this.scope) .off('.slider') .on('mousedown.fndtn.slider touchstart.fndtn.slider pointerdown.fndtn.slider', - '[' + self.attr_name() + '] .range-slider-handle', function(e) { + '[' + self.attr_name() + ']:not(.disabled, [disabled]) .range-slider-handle', function(e) { if (!self.cache.active) { e.preventDefault(); self.set_active_slider($(e.target)); diff --git a/scss/foundation/components/_range-slider.scss b/scss/foundation/components/_range-slider.scss index 395085d24b..5f2dde8445 100644 --- a/scss/foundation/components/_range-slider.scss +++ b/scss/foundation/components/_range-slider.scss @@ -43,6 +43,7 @@ $range-slider-handle-round: $global-rounded !default; $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default; $range-slider-handle-cursor: pointer !default; +$range-slider-disabled-opacity: 0.7 !default; // // @mixins @@ -66,11 +67,16 @@ $range-slider-handle-cursor: pointer !default; @mixin range-slider-bar-style( $bg: true, $radius: false, - $round: false) { - @if $bg == true { background: $range-slider-bar-bg-color; } - @if $radius == true { @include radius($range-slider-radius); } - @if $round == true { @include radius($range-slider-round); } + $round: false, + $disabled: false) { + @if $bg == true { background: $range-slider-bar-bg-color; } + @if $radius == true { @include radius($range-slider-radius); } + @if $round == true { @include radius($range-slider-round); } + @if $disabled == true { + cursor: $cursor-default-value; + opacity: $range-slider-disabled-opacity; } +} @mixin range-slider-bar( $bg: $range-slider-bar-bg-color, @@ -92,10 +98,15 @@ $range-slider-handle-cursor: pointer !default; @mixin range-slider-handle-style( $bg: true, $radius: false, - $round: false) { + $round: false, + $disabled: false) { @if $bg == true { background: $range-slider-handle-bg-color; } @if $radius == true { @include radius($range-slider-radius); } @if $round == true { @include radius($range-slider-round); } + @if $disabled == true { + cursor: $cursor-default-value; + opacity: $range-slider-disabled-opacity; + } &:hover { background: $range-slider-handle-bg-hover-color; } @@ -133,6 +144,10 @@ $range-slider-handle-cursor: pointer !default; @include range-slider-bar-style($round:true); .range-slider-handle { @include range-slider-handle-style($round: true); } } + &.disabled, &[disabled] { + @include range-slider-bar-style($disabled:true); + .range-slider-handle { @include range-slider-handle-style($disabled: true); } + } } .range-slider-active-segment { display: inline-block;