Last change
on this file since f25d07e was dbd4834, checked in by Marko <Marko@…>, 22 months ago |
Homepage, login and register components added
|
-
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 |
|
---|
| 22 | axios.get('/lowestPrice')
|
---|
| 23 | .then(response => this.setState({minValue: response.data}))
|
---|
| 24 | .catch(error => console.log(error))
|
---|
[dfd5d87] | 25 |
|
---|
[dbd4834] | 26 | axios.get('/highestPrice')
|
---|
| 27 | .then(response => this.setState({
|
---|
| 28 | maxValue: response.data,
|
---|
| 29 | }))
|
---|
| 30 | .catch(error => console.log(error))
|
---|
[dfd5d87] | 31 |
|
---|
[dbd4834] | 32 | }
|
---|
| 33 |
|
---|
| 34 | changeValue = (event, newValue) => {
|
---|
| 35 | this.setState({
|
---|
| 36 | value: newValue
|
---|
| 37 | });
|
---|
[dfd5d87] | 38 | };
|
---|
| 39 |
|
---|
[dbd4834] | 40 | handleChange = () => {
|
---|
| 41 | this.props.changeHandler({priceRange: this.state.value.join('-')})
|
---|
| 42 | }
|
---|
| 43 |
|
---|
| 44 |
|
---|
| 45 | render() {
|
---|
| 46 | return (
|
---|
| 47 | <div className="sliderPriceContainer">
|
---|
| 48 | <label className="sliderPriceLabel">Цена:</label>
|
---|
| 49 | <Box className="sliderBox" sx={{ width: 280 }}>
|
---|
[dfd5d87] | 50 | <Slider
|
---|
[dbd4834] | 51 | id="priceSlider"
|
---|
[dfd5d87] | 52 | getAriaLabel={() => 'Price range'}
|
---|
[dbd4834] | 53 | value={this.state.value}
|
---|
| 54 | onChange={this.changeValue}
|
---|
| 55 | onChangeCommitted={this.handleChange}
|
---|
[dfd5d87] | 56 | valueLabelDisplay="auto"
|
---|
[dbd4834] | 57 | min={this.state.minValue}
|
---|
| 58 | max={this.state.maxValue}
|
---|
[dfd5d87] | 59 | />
|
---|
| 60 | </Box>
|
---|
| 61 | </div>
|
---|
| 62 | );
|
---|
[dbd4834] | 63 | }
|
---|
[dfd5d87] | 64 | }
|
---|
[dbd4834] | 65 |
|
---|
| 66 | export default FilterPriceComponent
|
---|
| 67 |
|
---|
Note:
See
TracBrowser
for help on using the repository browser.