1
import {Slider} from '@coveord/plasma-react';
2

3
export default () => (
4
    <Slider
5
        id="asymetric-slider"
6
        min={-2000}
7
        max={10000}
8
        initialValue={2000}
9
        marks={{'-2000': '-2000', 2000: '2000', 0: '0', 10000: '10,000'}}
10
        hasTooltip
11
        appendValue
12
    />
13
);

1
import {Slider} from '@coveord/plasma-react';
2
import {useState} from 'react';
3

4
export default () => {
5
    const initialValue = 0;
6
    const [value, setValue] = useState(initialValue);
7
    return (
8
        <>
9
            <Slider
10
                id="slider-on-change"
11
                min={-100}
12
                max={100}
13
                marks={{
14
                    '-100': '-100%',
15
                    '-50': '-50%',
16
                    0: '0',
17
                    50: '50%',
18
                    100: '100%',
19
                }}
20
                step={5}
21
                initialValue={initialValue}
22
                onChange={(currentValue) => {
23
                    setValue(currentValue);
24
                }}
25
                hasTooltip
26
                customTooltip={() => <span>this custom tooltip shows the slider current value of {value}</span>}
27
            />
28
            The current value is {value}
29
        </>
30
    );
31
};

1
import {AppendedValueSide, Slider} from '@coveord/plasma-react';
2
import {FunctionComponent} from 'react';
3

4
const AppendLabel: FunctionComponent<{value: string; label: string}> = ({value, label}) => (
5
    <div style={{textAlign: 'center'}}>
6
        <label style={{display: 'block', marginBottom: '10px', textAlign: 'center'}}>{label}</label>
7
        <span style={{margin: '0 auto'}}>{value}</span>
8
    </div>
9
);
10

11
export default () => {
12
    const appendValueFormatter = (value: number, side: string) => {
13
        let formattedValue = `${value + 50}%`;
14
        let valueLabel = 'Right Label';
15

16
        if (side === AppendedValueSide.left) {
17
            formattedValue = `${50 - value}%`;
18
            valueLabel = 'Left Label';
19
        }
20

21
        return <AppendLabel value={formattedValue} label={valueLabel} />;
22
    };
23

24
    return (
25
        <Slider
26
            id="slider-append"
27
            min={-50}
28
            max={50}
29
            appendValueFormatter={appendValueFormatter}
30
            appendValue={AppendedValueSide.both}
31
        />
32
    );
33
};