Last change
on this file since 775e15e was e5b84dc, checked in by Marko <Marko@…>, 22 months ago |
Prototype version
|
-
Property mode
set to
100644
|
File size:
1.4 KB
|
Rev | Line | |
---|
[dfd5d87] | 1 | import * as React from 'react';
|
---|
| 2 | import Box from '@mui/material/Box';
|
---|
| 3 | import Slider from '@mui/material/Slider';
|
---|
| 4 | import "./FilterPriceComponent.css"
|
---|
[dbd4834] | 5 | import axios from 'axios';
|
---|
[dfd5d87] | 6 |
|
---|
[dbd4834] | 7 | export class FilterPriceComponent extends React.Component {
|
---|
| 8 |
|
---|
| 9 | constructor(props) {
|
---|
| 10 | super(props)
|
---|
| 11 |
|
---|
| 12 | this.state = {
|
---|
| 13 | value: [1000,150000],
|
---|
| 14 | minValue: 0,
|
---|
| 15 | maxValue: 0
|
---|
| 16 | }
|
---|
| 17 | }
|
---|
| 18 |
|
---|
| 19 | componentDidMount(){
|
---|
| 20 |
|
---|
| 21 | axios.get('/lowestPrice')
|
---|
| 22 | .then(response => this.setState({minValue: response.data}))
|
---|
| 23 | .catch(error => console.log(error))
|
---|
[dfd5d87] | 24 |
|
---|
[dbd4834] | 25 | axios.get('/highestPrice')
|
---|
| 26 | .then(response => this.setState({
|
---|
| 27 | maxValue: response.data,
|
---|
| 28 | }))
|
---|
| 29 | .catch(error => console.log(error))
|
---|
[dfd5d87] | 30 |
|
---|
[dbd4834] | 31 | }
|
---|
| 32 |
|
---|
| 33 | changeValue = (event, newValue) => {
|
---|
| 34 | this.setState({
|
---|
| 35 | value: newValue
|
---|
| 36 | });
|
---|
[dfd5d87] | 37 | };
|
---|
| 38 |
|
---|
[dbd4834] | 39 | handleChange = () => {
|
---|
| 40 | this.props.changeHandler({priceRange: this.state.value.join('-')})
|
---|
| 41 | }
|
---|
| 42 |
|
---|
| 43 |
|
---|
| 44 | render() {
|
---|
| 45 | return (
|
---|
| 46 | <div className="sliderPriceContainer">
|
---|
| 47 | <label className="sliderPriceLabel">Цена:</label>
|
---|
| 48 | <Box className="sliderBox" sx={{ width: 280 }}>
|
---|
[dfd5d87] | 49 | <Slider
|
---|
[dbd4834] | 50 | id="priceSlider"
|
---|
[dfd5d87] | 51 | getAriaLabel={() => 'Price range'}
|
---|
[dbd4834] | 52 | value={this.state.value}
|
---|
| 53 | onChange={this.changeValue}
|
---|
| 54 | onChangeCommitted={this.handleChange}
|
---|
[dfd5d87] | 55 | valueLabelDisplay="auto"
|
---|
[dbd4834] | 56 | min={this.state.minValue}
|
---|
| 57 | max={this.state.maxValue}
|
---|
[dfd5d87] | 58 | />
|
---|
| 59 | </Box>
|
---|
| 60 | </div>
|
---|
| 61 | );
|
---|
[dbd4834] | 62 | }
|
---|
[dfd5d87] | 63 | }
|
---|
[dbd4834] | 64 |
|
---|
| 65 | export default FilterPriceComponent
|
---|
| 66 |
|
---|
Note:
See
TracBrowser
for help on using the repository browser.