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

Add aria

  • Loading branch information...
mikejolley committed Aug 1, 2019
commit a384d7cdf41954273f96a60c212716b88462a8e9
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { sprintf } from '@wordpress/i18n';
import { sprintf, __ } from '@wordpress/i18n';
import { Component, createRef } from 'react';

/**
@@ -37,6 +37,7 @@ class PriceSlider extends Component {
this.onInputBlur = this.onInputBlur.bind( this );
this.findClosestRange = this.findClosestRange.bind( this );
this.validateValues = this.validateValues.bind( this );
this.getProgressStyle = this.getProgressStyle.bind( this );
this.formatCurrencyForInput = this.formatCurrencyForInput.bind( this );
}

@@ -197,30 +198,52 @@ class PriceSlider extends Component {
}
}

render() {
const { min, max, step, currentMin, currentMax } = this.state;
getProgressStyle() {
const { min, max, currentMin, currentMax } = this.state;

const low = Math.round( 100 * ( ( currentMin - min ) / ( max - min ) ) ) + 0.5;
const high = Math.round( 100 * ( ( currentMax - min ) / ( max - min ) ) ) + 0.5;

return {
'--low': low + '%',
'--high': high + '%',
};
}

render() {
const { min, max, step, currentMin, currentMax } = this.state;
return (
<div className="wc-block-price-filter">
<input type="text" onChange={ this.onInputChange } onBlur={ this.onInputBlur } ref={ this.minInput } className="wc-block-price-filter__amount wc-block-price-filter__amount--min" value={ this.state.inputMin } size="5" />
<input type="text" onChange={ this.onInputChange } onBlur={ this.onInputBlur } ref={ this.maxInput } className="wc-block-price-filter__amount wc-block-price-filter__amount--max" value={ this.state.inputMax } size="5" />
<input
type="text"
className="wc-block-price-filter__amount wc-block-price-filter__amount--min"
aria-label={ __( 'Filter products by minimum price', 'woo-gutenberg-products-block' ) }
size="5"
ref={ this.minInput }
value={ this.state.inputMin }
This conversation was marked as resolved by mikejolley

This comment has been minimized.

Copy link
@nerrad

nerrad Aug 7, 2019

Contributor

might as well destruct this value from this.state in the original assignment (same with other direct property calls in this code block)?

onChange={ this.onInputChange }
onBlur={ this.onInputBlur }
/>
<input
type="text"
className="wc-block-price-filter__amount wc-block-price-filter__amount--max"
aria-label={ __( 'Filter products by maximum price', 'woo-gutenberg-products-block' ) }
size="5"
ref={ this.maxInput }
value={ this.state.inputMax }
onChange={ this.onInputChange }
onBlur={ this.onInputBlur }
/>
<div
className="wc-block-price-filter__range-input-wrapper"
onMouseMove={ this.findClosestRange }
onFocus={ this.findClosestRange }
>
<div className="wc-block-price-filter__range-input-progress" style={
{
'--low': low + '%',
'--high': high + '%',
}
} />
<div className="wc-block-price-filter__range-input-progress" style={ this.getProgressStyle() } />
<input
type="range"
className="wc-block-price-filter__range-input wc-block-price-filter__range-input--min"
aria-label={ __( 'Filter products by minimum price', 'woo-gutenberg-products-block' ) }
ref={ this.minRange }
onChange={ this.onDrag }
value={ currentMin ? currentMin : 0 }
@@ -231,6 +254,7 @@ class PriceSlider extends Component {
<input
type="range"
className="wc-block-price-filter__range-input wc-block-price-filter__range-input--max"
aria-label={ __( 'Filter products by maximum price', 'woo-gutenberg-products-block' ) }
ref={ this.maxRange }
onChange={ this.onDrag }
value={ currentMax ? currentMax : max }
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.