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
|
Line | |
---|
1 | import * as React from 'react';
|
---|
2 | import Box from '@mui/material/Box';
|
---|
3 | import Slider from '@mui/material/Slider';
|
---|
4 | import "./FilterPriceComponent.css"
|
---|
5 | import axios from 'axios';
|
---|
6 |
|
---|
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))
|
---|
24 |
|
---|
25 | axios.get('/highestPrice')
|
---|
26 | .then(response => this.setState({
|
---|
27 | maxValue: response.data,
|
---|
28 | }))
|
---|
29 | .catch(error => console.log(error))
|
---|
30 |
|
---|
31 | }
|
---|
32 |
|
---|
33 | changeValue = (event, newValue) => {
|
---|
34 | this.setState({
|
---|
35 | value: newValue
|
---|
36 | });
|
---|
37 | };
|
---|
38 |
|
---|
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 }}>
|
---|
49 | <Slider
|
---|
50 | id="priceSlider"
|
---|
51 | getAriaLabel={() => 'Price range'}
|
---|
52 | value={this.state.value}
|
---|
53 | onChange={this.changeValue}
|
---|
54 | onChangeCommitted={this.handleChange}
|
---|
55 | valueLabelDisplay="auto"
|
---|
56 | min={this.state.minValue}
|
---|
57 | max={this.state.maxValue}
|
---|
58 | />
|
---|
59 | </Box>
|
---|
60 | </div>
|
---|
61 | );
|
---|
62 | }
|
---|
63 | }
|
---|
64 |
|
---|
65 | export default FilterPriceComponent
|
---|
66 |
|
---|
Note:
See
TracBrowser
for help on using the repository browser.