Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Range slider component #793

Closed
wants to merge 25 commits into from
Closed
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

styling

  • Loading branch information...
mikejolley committed Jul 31, 2019
commit 448f9bde0dff0cd116b39010cc7e1298c6eaaa92
@@ -70,7 +70,7 @@ class PriceSlider extends Component {

this.setState( {
currentMin: value ? parseInt( value, 10 ) : '',
currentMax: Math.min( max, Math.max( parseInt( value, 10 ), this.maxRange.current.value ) ),
currentMax: Math.min( max, Math.max( parseInt( value, 10 ) || 0, this.maxRange.current.value ) ),
} );
}

@@ -88,7 +88,7 @@ class PriceSlider extends Component {
}

this.setState( {
currentMin: Math.max( min, Math.min( this.minRange.current.value, parseInt( value, 10 ) ) ),
currentMin: Math.max( min, Math.min( this.minRange.current.value, parseInt( value, 10 ) || 0 ) ),
currentMax: value ? parseInt( value, 10 ) : '',
} );
}
@@ -1,17 +1,45 @@
@mixin thumb {
background-color: transparent;
/* stylelint-disable */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='52' height='42'%3E%3Cdefs%3E%3Cpath id='a' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath id='b' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%2395588A' d='M24.3176 8.9423l-8.4163-6.1432c-1.706-1.2285-3.6395-1.8988-5.6867-1.787h-.1137c-4.8906.335-8.985 4.356-9.0987 9.2706C.8885 15.644 5.2102 20 10.6696 20h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M9 6v9m3-9v9'/%3E%3Cg fill-rule='nonzero' transform='translate(1 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23a'/%3E%3Cuse stroke='%2395588A' xlink:href='%23a'/%3E%3C/g%3E%3Cpath stroke='%2395588A' d='M9 27v9m3-9v9'/%3E%3Cg%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%2395588A' d='M27.6824 8.9423l8.4163-6.1432c1.706-1.2285 3.6395-1.8988 5.6867-1.787h.1137c4.8906.335 8.985 4.356 9.0987 9.2706C51.1115 15.644 46.7898 20 41.3304 20h-.1137c-1.8197 0-3.6395-.6702-5.118-1.787l-8.4163-6.255c-.9099-.8935-.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M43 6v9m-3-9v9'/%3E%3C/g%3E%3Cg%3E%3Cg fill-rule='nonzero' transform='matrix(-1 0 0 1 51 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23b'/%3E%3Cuse stroke='%2395588A' xlink:href='%23b'/%3E%3C/g%3E%3Cpath stroke='%2395588A' d='M43 27v9m-3-9v9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
/* stylelint-enable */
background-position: 0 0;
width: 26px;
height: 21px;
border: 0;
padding: 0;
margin: 0;
vertical-align: top;
cursor: pointer;
z-index: 20;
pointer-events: auto;

&:hover,
&:active {
background-position-y: -21px;
filter: drop-shadow( 3px 0 0 rgba( 255, 255, 255, .75 ) ) drop-shadow( -3px 0 0 rgba( 255, 255, 255, .75 ) );
}
}

@mixin track {
cursor: default;
height: 0;
outline: 0;
}

.wc-block-price-filter__slider_group {

.wc-block-price-filter__amount {
display: inline-block;
margin-bottom: 20px;
border-radius: 4px;
}

.wc-block-price-filter__amount--min {
float: left;
}

.wc-block-price-filter__amount--max {
float: right;
&.wc-block-price-filter__amount--min {
float: left;
}
&.wc-block-price-filter__amount--max {
float: right;
}
}

.wc-block-price-filter__slider_range {
@@ -31,14 +59,13 @@
padding: 0;
position: absolute;
z-index: 5;
}

.wc-block-price-filter__slider_range_progress--start {
left: 0;
}

.wc-block-price-filter__slider_range_progress--end {
right: 0;
&.wc-block-price-filter__slider_range_progress--start {
left: 0;
}
&.wc-block-price-filter__slider_range_progress--end {
right: 0;
}
}

.wc-block-price-filter__slider {
@@ -49,50 +76,74 @@
padding: 0;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
display: block;
outline: 0;
z-index: 10;
outline: none;
position: relative;
pointer-events: none;

&:focus {
outline: none;
}

&::-moz-focus-outer {
border: 0;
}

&::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 0;
outline: 0;
@include track;
}
&::-moz-range-track {
-moz-appearance: none;
@include track;
}
&::-ms-track {
@include track;
}

&:focus {
outline: none;
&::-webkit-slider-thumb {
-webkit-appearance: none;
@include thumb;
margin: -6px 0 0 0;
}
&::-moz-range-thumb {
-moz-appearance: none;
@include thumb;
}
&::-ms-thumb {
@include thumb;
}

&.wc-block-price-filter__slider--min {
z-index: 15;

&::-webkit-slider-thumb {
margin-left: -7px;
}
&::-moz-range-thumb {
transform: translate( -7px, 4px );
}
&::-ms-thumb {
margin-left: -7px;
}
}

&.wc-block-price-filter__slider--max {
z-index: 10;

&::-webkit-slider-thumb {
background-position-x: 26px;
margin-left: 7px;
}
&::-moz-range-thumb {
background-position-x: 26px;
transform: translate( 7px, 4px );
}
&::-ms-thumb {
background-position-x: 26px;
margin-left: 7px;
}
}
}
.wc-block-price-filter__slider::-webkit-slider-thumb {
-webkit-appearance: none;
/* stylelint-disable */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='52' height='42'%3E%3Cdefs%3E%3Cpath id='a' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath id='b' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%2395588A' d='M24.3176 8.9423l-8.4163-6.1432c-1.706-1.2285-3.6395-1.8988-5.6867-1.787h-.1137c-4.8906.335-8.985 4.356-9.0987 9.2706C.8885 15.644 5.2102 20 10.6696 20h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M9 6v9m3-9v9'/%3E%3Cg fill-rule='nonzero' transform='translate(1 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23a'/%3E%3Cuse stroke='%2395588A' xlink:href='%23a'/%3E%3C/g%3E%3Cpath stroke='%2395588A' d='M9 27v9m3-9v9'/%3E%3Cg%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%2395588A' d='M27.6824 8.9423l8.4163-6.1432c1.706-1.2285 3.6395-1.8988 5.6867-1.787h.1137c4.8906.335 8.985 4.356 9.0987 9.2706C51.1115 15.644 46.7898 20 41.3304 20h-.1137c-1.8197 0-3.6395-.6702-5.118-1.787l-8.4163-6.255c-.9099-.8935-.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M43 6v9m-3-9v9'/%3E%3C/g%3E%3Cg%3E%3Cg fill-rule='nonzero' transform='matrix(-1 0 0 1 51 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23b'/%3E%3Cuse stroke='%2395588A' xlink:href='%23b'/%3E%3C/g%3E%3Cpath stroke='%2395588A' d='M43 27v9m-3-9v9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
/* stylelint-enable */
background-position: 0 0;
width: 26px;
height: 21px;
border: 0;
padding: 0;
margin: -6px 0 0 0;
cursor: pointer;
z-index: 20;
}
.wc-block-price-filter__slider::-webkit-slider-thumb:active,
.wc-block-price-filter__slider::-webkit-slider-thumb:hover {
background-position-y: -21px;
}
.wc-block-price-filter__slider--min {
z-index: 25;
}
.wc-block-price-filter__slider--max {
z-index: 20;
}
.wc-block-price-filter__slider--min::-webkit-slider-thumb {
margin-left: -7px;
}
.wc-block-price-filter__slider--max::-webkit-slider-thumb {
background-position-x: 26px;
margin-left: 7px;
}
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.