Add a functional range bar

Author: DAreRodz

assets/js/blocks/simple-price-filter/style.scss

@@ -0,0 +1,41 @@
+.wp-block-woocommerce-simple-price-filter {
+	--low: 0%;
+	--high: 100%;
+	--range-color: currentColor;
+
+	.range {
+		position: relative;
+		margin: 15px 0;
+
+		.range-bar {
+			position: relative;
+			height: 4px;
+			background: linear-gradient(90deg, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100%/100% 100%;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background: currentColor;
+				opacity: .2;
+			}
+		}
+
+		input[type="range"] {
+			position: absolute;
+			top: 50%;
+			left: 0;
+			width: 100%;
+			height: 0;
+			margin: 0;
+			padding: 0;
+
+			&.active {
+				z-index: 10;
+			}
+		}
+	}
+}

assets/js/blocks/simple-price-filter/view.js

@@ -33,25 +33,53 @@ wpx( {
 		filters: {
 			minPrice: parseFloat( initialMinPrice ) || 0,
 			maxPrice: parseFloat( initialMaxPrice ) || Infinity,
+			maxRange: 90, // TODO: get this value from SSR.
+			isMinActive: true,
+			isMaxActive: false,
+		},
+	},
+	derived: {
+		filters: {
+			rangeStyle: ( { state } ) => {
+				const { minPrice, maxPrice, maxRange } = state.filters;
+				return {
+					'--low': `${ ( 100 * minPrice ) / maxRange }%`,
+					'--high': `${ ( 100 * maxPrice ) / maxRange }%`,
+				};
+			},
 		},
 	},
 	actions: {
 		filters: {
 			setMinPrice: ( { state, event } ) => {
 				const value = parseFloat( event.target.value ) || 0;
 				state.filters.minPrice = value;
-				navigate( getHrefWithFilters( { state } ) );
 			},
 			setMaxPrice: ( { state, event } ) => {
-				const value = parseFloat( event.target.value ) || Infinity;
+				const value =
+					parseFloat( event.target.value ) || state.filters.maxRange;
 				state.filters.maxPrice = value;
+			},
+			updateProducts: ( { state } ) => {
 				navigate( getHrefWithFilters( { state } ) );
 			},
 			reset: ( { state } ) => {
 				state.filters.minPrice = 0;
 				state.filters.maxPrice = Infinity;
 				navigate( getHrefWithFilters( { state } ) );
 			},
+			updateActiveHandle: ( { state, event } ) => {
+				const { minPrice, maxPrice, maxRange } = state.filters;
+				const { target, offsetX } = event;
+				const xPos = offsetX / target.offsetWidth;
+				const minPos = minPrice / maxRange;
+				const maxPos = maxPrice / maxRange;
+
+				state.filters.isMinActive =
+					Math.abs( xPos - minPos ) < Math.abs( xPos - maxPos );
+
+				state.filters.isMaxActive = ! state.filters.isMinActive;
+			},
 		},
 	},
 } );

src/BlockTypes/SimplePriceFilter.php

@@ -22,11 +22,64 @@ public function render( $attributes = [], $content = '', $block = null ) {
 		$wrapper_attributes = get_block_wrapper_attributes();
 		$min_price = get_query_var( self::MIN_PRICE_QUERY_VAR );
 		$max_price = get_query_var( self::MAX_PRICE_QUERY_VAR );
-		return "<div $wrapper_attributes>
-			<label>Min price: <input type='text' wp-on:change='actions.filters.setMinPrice' wp-bind:value='state.filters.minPrice' value='$min_price'></label>
-			<label>Max price: <input type='text' wp-on:change='actions.filters.setMaxPrice' wp-bind:value='state.filters.maxPrice' value='$max_price'></label>
+		$max_range = 90; // TODO: get this value from DB.
+
+		// CSS variables for the range bar style.
+		$__low = 100 * $min_price / $max_range;
+		$__high = 100 * $max_price / $max_range;
+		$range_style = "--low: $__low%; --high: $__high%";
+
+		return "
+		<div $wrapper_attributes>
+			<div
+				class='range'
+				style='$range_style'
+				wp-bind:style='derived.filters.rangeStyle'
+				wp-on:mousemove='actions.filters.updateActiveHandle'
+			>
+				<div class='range-bar'></div>
+				<input
+					class='active'
+					type='range'
+					value='$min_price'
+					min='0'
+					max='$max_range'
+					wp-bind:value='state.filters.minPrice'
+					wp-class:active='state.filters.isMinActive'
+					wp-on:input='actions.filters.setMinPrice'
+					wp-on:change='actions.filters.updateProducts'
+				>
+				<input
+					class=''
+					type='range'
+					value='$max_price'
+					min='0'
+					max='$max_range'
+					wp-bind:value='state.filters.maxPrice'
+					wp-class:active='state.filters.isMaxActive'
+					wp-on:input='actions.filters.setMaxPrice'
+					wp-on:change='actions.filters.updateProducts'
+				>
+			</div>
+			<div>
+				<input
+					type='text'
+					value='$min_price'
+					wp-bind:value='state.filters.minPrice'
+					wp-on:input='actions.filters.setMinPrice'
+					wp-on:change='actions.filters.updateProducts'
+				>
+				<input
+					type='text'
+					value='$max_price'
+					wp-bind:value='state.filters.maxPrice'
+					wp-on:input='actions.filters.setMaxPrice'
+					wp-on:change='actions.filters.updateProducts'
+				>
+			</div>
 			<button wp-on:click='actions.filters.reset'>Reset</button>
-		</div>";
+		</div>
+		";
 	}
 
 	/**