<commit_before>import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
	ReactiveBase,
	RangeSlider,
	ReactiveList,
	SelectedFilters,
} from '@appbaseio/reactivesearch';

import './index.css';

class Main extends Component {
	render() {
		return (
			<ReactiveBase
				app="car-store"
				credentials="cf7QByt5e:<KEY>"
			>
				<div className="row">
					<div className="col">
						<RangeSlider
							dataField="rating"
							componentId="RangeSlider"
							title="Range Slider"
							range={{
								start: 0,
								end: 6,
							}}
							rangeLabels={{
								start: 'Start',
								end: 'End',
							}}
						/>
					</div>

					<div className="col">
						<SelectedFilters />
						<ReactiveList
							componentId="SearchResult"
							dataField="name"
							title="ReactiveList"
							from={0}
							size={20}
							onData={this.onData}
							pagination
							react={{
								and: 'RangeSlider',
							}}
						/>
					</div>
				</div>
			</ReactiveBase>
		);
	}

	onData(data) {
		return (
			<div key={data._id}>
				<h2>{data.name}</h2>
				<p>{data.price} - {data.rating} stars rated</p>
			</div>
		);
	}
}

ReactDOM.render(<Main />, document.getElementById('root'));
<commit_msg>web: Update RangeSlider example app<commit_after>import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
	ReactiveBase,
	RangeSlider,
	ResultList,
} from '@appbaseio/reactivesearch';

import './index.css';

class Main extends Component {
	render() {
		return (
			<ReactiveBase
				app="good-books-live"
				credentials="sHZWU7AYJ:<KEY>"
			>
				<div className="row">
					<div className="col">
						<RangeSlider
							dataField="ratings_count"
							componentId="BookSensor"
							range={{
								start: 3000,
								end: 50000,
							}}
							rangeLabels={{
								start: '3K',
								end: '50K',
							}}
							{...this.props}
						/>
					</div>

					<div className="col">
						<ResultList
							componentId="SearchResult"
							dataField="original_title"
							from={0}
							size={3}
							className="result-list-container"
							onData={this.booksList}
							pagination
							react={{
								and: 'BookSensor',
							}}
						/>
					</div>
				</div>
			</ReactiveBase>
		);
	}

	booksList(data) {
		return {
			title: <div className="book-title" dangerouslySetInnerHTML={{ __html: data.original_title }} />,
			description: (
				<div className="flex column justify-space-between">
					<div>
						<div>by <span className="authors-list">{data.authors}</span></div>
						<div className="ratings-list flex align-center">
							<span className="stars">
								{
									Array(data.average_rating_rounded).fill('x')
										.map((item, index) => <i className="fas fa-star" key={index} />)
								}
							</span>
							<span className="avg-rating">({data.average_rating} avg)</span>
						</div>
					</div>
					<span className="pub-year">Pub {data.original_publication_year}</span>
				</div>
			),
			image: data.image,
		};
	}
}

ReactDOM.render(<Main />, document.getElementById('root'));

{'fraction_non_alphanumeric': 0.15803025426456388, 'fraction_numerical': 0.007724493080141615, 'mean_word_length': 2.352750809061489, 'pattern_counts': {'":': 0, '<': 52, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7549783', 'n_tokens_mistral': 1510, 'n_tokens_neox': 1023, 'n_words': 185}