initial commit

packages/woocommerce-blocks/assets/js/base/components/price-slider/stories/index.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PriceSlider from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/PriceSlider',
+	component: PriceSlider,
+};
+
+export const Default = () => {
+	// PriceSlider expects client to update min & max price, i.e. is a controlled component
+	const [ min, setMin ] = useState( 1000 );
+	const [ max, setMax ] = useState( 5000 );
+	return (
+		<PriceSlider
+			minPrice={ min }
+			maxPrice={ max }
+			onChange={ ( values ) => {
+				setMin( values[ 0 ] );
+				setMax( values[ 1 ] );
+			} }
+			minConstraint={ 1000 }
+			maxConstraint={ 5000 }
+			step={ 250 }
+			currency={ {
+				code: 'nzd',
+				symbol: '$',
+				thousandSeparator: ' ',
+				decimalSeparator: '.',
+				minorUnit: 2,
+				prefix: '$',
+				suffix: '',
+			} }
+		/>
+	);
+};