Scribd
Upload
12 views

Range

This document shows code for implementing a range slider component in React to filter hotel search results by price. It includes JavaScript code defining the component along with styling and examples of usage.

Uploaded by

Benjamin Perez
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

Range

This document shows code for implementing a range slider component in React to filter hotel search results by price. It includes JavaScript code defining the component along with styling and examples of usage.

Uploaded by

Benjamin Perez
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

{

"title": "Spanje op zijn best - Sunliner vliegvakanties, autovakanties en


busvakanties",
"hotelsFound": "{{count}} vakanties gevonden",

"filters": {
"country": "Landen",
"region": "Regio's",
"board": "Verzorging",
"price": "Prijs",
"airports": "Vervoer",
"classification": "Sterren"
}
}

<div className="range">
<div className="sliderValue">
<span>100</span>
</div>
<div className="field">
<div className="value left">0</div>
<input type="range" min="10" max="200" value="100" steps="1">
<div className="value right">200</div>
</input>
</div>
</div>

__________________________________________________

import React from 'react';


import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
import useTranslation from 'next-translate/useTranslation';

const useStyles = makeStyles(theme => ({


root: {
width: 300,
},
margin: {
height: theme.spacing(3),
},
}));

const marks = [
{
value: 0,
label: '0 €',
},
{
value: 300,
label: '300 €',
},
{
value: 500,
label: '500 €',
},
{
value: 800,
label: '800 €',
},
];

function valuetext(value) {
return `${value}€`;
}

export default function DiscreteSlider() {


const classes = useStyles();
const { t } = useTranslation('search');

return (
<div className={classes.root}>
<Typography id="discrete-slider-always" gutterBottom>
<h4>{t('filters.price')}</h4>
</Typography>
<Slider
defaultValue={80}
getAriaValueText={valuetext}
aria-labelledby="discrete-slider-always"
step={10}
marks={marks}
valueLabelDisplay="on"
/>
</div>
);
}
_____________________________________________

import styles from './SearchFilterOption.module.scss';


import { useFormContext } from 'react-hook-form';
import useTranslation from 'next-translate/useTranslation';
import clsx from 'clsx';

export default function SearchFilterOptionPrice({ sectionName, price }) {


const inputId = `filters.${sectionName}`;

const { register, watch, setValue } = useFormContext();


const isSelected = watch(inputId) === 'true';
const { t } = useTranslation('search');
console.log(inputId);

return (
<div
className={clsx(styles.option, isSelected && styles.optionSelected)}
type="submit"
>
<h4 className={styles.title}>{t('filters.price')}</h4>

<input
id={inputId}
name={inputId}
type="range"
steps="6"
ref={register}
/>
</div>
);
}

_____________________________________________
SearchFilterOptionPrice.js
SearchFilterOptionPrice.module.scss
<SearchFilterOptionPrice sectionName="price" price={filters.price} />

import styles from './SearchFilterOption.module.scss';


import { useFormContext } from 'react-hook-form';
import useTranslation from 'next-translate/useTranslation';
import clsx from 'clsx';

export default function SearchFilterOptionPrice({ sectionName, price }) {


const inputId = `filters.${sectionName}`;

const { register, watch, setValue } = useFormContext();


const isSelected = watch(inputId) === 'true';
const { t } = useTranslation('search');
console.log(inputId);

return (
<div
className={clsx(styles.option, isSelected && styles.optionSelected)}
type="submit"
>
<h4 className={styles.title}>{t('filters.price')}</h4>

<input
id={inputId}
name={inputId}
type="range"
steps="6"
ref={register}
/>
</div>
);
}

/*<RangeInput
value={{ min: valorActualMinimo, max: valorActualMaximo }}
rangeValue={{ min: valorHotelMinimo, max: valorHotelMaximo }}
onChange={(event, value) => setValue(value.min, value.max)}
/>*/

You might also like