<commit_before>import React, { Component } from 'react';
import Slider from '../../src/react-chayns-slider/component/Slider';
import { Tooltip } from '../../src';

export default class SliderExample extends Component {
    constructor(props) {
        super(props);
        this.state = { value: 100, startValue: 30, endValue: 70 };
    }


    render() {
        const { value, startValue, endValue } = this.state;
        console.log(value, startValue, endValue);
        return (
            <div>
                <div style={{ textAlign: 'center' }}>
                    <Tooltip
                        position={Tooltip.position.BOTTOM_CENTER}
                        minWidth={150}
                        content={{
                            html: <Slider/>,
                        }}
                        bindListeners
                    >
                        <p>Tooltip with Slider</p>
                    </Tooltip>
                </div>
                <div style={{ textAlign: 'center' }}>
                    <Tooltip
                        position={Tooltip.position.BOTTOM_CENTER}
                        content={{
                            html: <Slider vertical style={{ maxHeight: '100px', marginBottom: '20px' }}/>,
                        }}
                        minWidth="auto"
                        bindListeners
                    >
                        <p>Tooltip with Slider (vertical)</p>
                    </Tooltip>
                </div>
                <Slider interval/>
                <Slider/>
                <Slider
                    showLabel
                    interval
                    minInterval={10}
                    maxInterval={60}
                    defaultStartValue={30}
                    defaultEndValue={70}
                    onChange={(start, end) => {
                        this.setState({ startValue: start, endValue: end });
                    }}
                />
                <Slider
                    showLabel
                    min={50}
                    max={150}
                    defaultValue={100}
                    onChange={(newValue) => {
                        this.setState({ value: newValue });
                    }}
                    step={10}
                />
                <Slider
                    showValueInThumb
                    showLabel
                    interval
                    minInterval={10}
                    maxInterval={60}
                    defaultStartValue={30}
                    defaultEndValue={70}
                    onChange={(start, end) => {
                        this.setState({ startValue: start, endValue: end });
                    }}
                />
                <Slider
                    showValueInThumb
                    showLabel
                    min={50}
                    max={150}
                    defaultValue={100}
                    onChange={(newValue) => {
                        this.setState({ value: newValue });
                    }}
                    step={10}
                />
                <Slider showLabel disabled interval startValue={startValue} endValue={endValue}/>
                <Slider showLabel disabled value={value} min={50} max={150}/>
                <Slider vertical interval/>
                <Slider vertical/>
                <Slider
                    vertical
                    showLabel
                    interval
                    minInterval={10}
                    maxInterval={60}
                    defaultStartValue={30}
                    defaultEndValue={70}
                    onChange={(start, end) => {
                        this.setState({ startValue: start, endValue: end });
                    }}
                />
                <Slider
                    vertical
                    showLabel
                    min={50}
                    max={150}
                    defaultValue={100}
                    onChange={(newValue) => {
                        this.setState({ value: newValue });
                    }}
                    step={10}
                />
                <Slider vertical showLabel disabled interval startValue={startValue} endValue={endValue}/>
                <Slider vertical showLabel disabled value={value} min={50} max={150}/>
            </div>
        );
    }
}<commit_msg>🎨 Update slider example to use hooks<commit_after>import React, { useState } from 'react';
import Slider from '../../src/react-chayns-slider/component/Slider';
import { Tooltip } from '../../src';

const SliderExample = () => {
    const [value, setValue] = useState(100);
    const [startValue, setStartValue] = useState(30);
    const [endValue, setEndValue] = useState(70);

    return (
        <div>
            <div style={{ textAlign: 'center' }}>
                <Tooltip
                    position={Tooltip.position.BOTTOM_CENTER}
                    minWidth={150}
                    content={{
                        html: <Slider/>,
                    }}
                    bindListeners
                >
                    <p>Tooltip with Slider</p>
                </Tooltip>
            </div>
            <div style={{ textAlign: 'center' }}>
                <Tooltip
                    position={Tooltip.position.BOTTOM_CENTER}
                    content={{
                        html: <Slider vertical style={{ maxHeight: '100px', marginBottom: '20px' }}/>,
                    }}
                    minWidth="auto"
                    bindListeners
                >
                    <p>Tooltip with Slider (vertical)</p>
                </Tooltip>
            </div>
            <Slider interval/>
            <Slider/>
            <Slider
                showLabel
                interval
                minInterval={10}
                maxInterval={60}
                defaultStartValue={30}
                defaultEndValue={70}
                onChange={(start, end) => {
                    setStartValue(start);
                    setEndValue(end);
                }}
            />
            <Slider
                showLabel
                min={50}
                max={150}
                defaultValue={100}
                onChange={(newValue) => {
                    setValue(newValue);
                }}
                step={10}
            />
            <Slider
                showValueInThumb
                showLabel
                interval
                minInterval={10}
                maxInterval={60}
                defaultStartValue={30}
                defaultEndValue={70}
                onChange={(start, end) => {
                    setStartValue(start);
                    setEndValue(end);
                }}
            />
            <Slider
                showValueInThumb
                showLabel
                min={50}
                max={150}
                defaultValue={100}
                onChange={(newValue) => {
                    setValue(newValue);
                }}
                step={10}
            />
            <Slider showLabel disabled interval startValue={startValue} endValue={endValue}/>
            <Slider showLabel disabled value={value} min={50} max={150}/>
            <Slider vertical interval/>
            <Slider vertical/>
            <Slider
                vertical
                showLabel
                interval
                minInterval={10}
                maxInterval={60}
                defaultStartValue={30}
                defaultEndValue={70}
                onChange={(start, end) => {
                    setStartValue(start);
                    setEndValue(end);
                }}
            />
            <Slider
                vertical
                showLabel
                min={50}
                max={150}
                defaultValue={100}
                onChange={(newValue) => {
                    setValue(newValue);
                }}
                step={10}
            />
            <Slider vertical showLabel disabled interval startValue={startValue} endValue={endValue}/>
            <Slider vertical showLabel disabled value={value} min={50} max={150}/>
        </div>
    );
};

export default SliderExample;
{'fraction_non_alphanumeric': 0.098950162905756, 'fraction_numerical': 0.019066006998913962, 'mean_word_length': 0.9292364990689013, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 76, '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': '513254', 'n_tokens_mistral': 1996, 'n_tokens_neox': 1811, 'n_words': 362}