hierarchical-estimates-visu.../lib/slider.js

126 lines
2.9 KiB
JavaScript

/* Imports */
import { Slider, Rail, Handles, Tracks, Ticks } from "react-compound-slider";
import React, { useState } from 'react';
// https://sghall.github.io/react-compound-slider/#/getting-started/tutorial
/* Definitions */
const sliderStyle = { // Give the slider some width
position: 'relative',
width: '40em',
height: 40,
border: '5em',
}
const railStyle = {
position: 'absolute',
width: '100%',
height: 15,
marginTop: 30,
borderRadius: 5,
backgroundColor: 'lightgrey',
}
/* Support functions */
function Handle({
handle: { id, value, percent },
getHandleProps,
displayFunction,
handleWidth
}) {
return (
<>
<div className="justify-center text-center text-gray-600 text-xs">
{displayFunction(value)}
</div>
<div
style={{
left: `${percent}%`,
position: 'absolute',
marginLeft: -10,
marginTop: 0,
zIndex: 2,
width: 30,
height: 30,
cursor: 'pointer',
borderRadius: '50%',
backgroundColor: '#374151',
color: '#374151',
}}
{...getHandleProps(id)}
>
</div>
</>
)
}
function Track({ source, target, getTrackProps }) {
return (
<div
style={{
position: 'absolute',
height: 15,
zIndex: 1,
marginTop: 7,
backgroundColor: ' #3B82F6',
borderRadius: 5,
cursor: 'pointer',
left: `${source.percent}%`,
width: `${target.percent - source.percent}%`,
}}
{...getTrackProps() /* this will set up events if you want it to be clickeable (optional) */}
/>
)
}
/* Body */
// Two functions, essentially identical.
export function SliderElement({ onChange, value, displayFunction }) {
return (
<Slider
rootStyle={sliderStyle /* inline styles for the outer div. Can also use className prop. */}
domain={[-3,3]}
values={[value]}
onChange={onChange}
reversed={true}
>
<Rail>
{({ getRailProps }) => (
<div style={railStyle} {...getRailProps()} />
)}
</Rail>
<Handles>
{({ handles, getHandleProps }) => (
<div className="slider-handles">
{handles.map(handle => (
<Handle
key={handle.id}
handle={handle}
getHandleProps={getHandleProps}
displayFunction={displayFunction}
handleWidth={"15em"}
/>
))}
</div>
)}
</Handles>
<Tracks right={false}>
{({ tracks, getTrackProps }) => (
<div className="slider-tracks">
{tracks.map(({ id, source, target }) => (
<Track
key={id}
source={source}
target={target}
getTrackProps={getTrackProps}
/>
))}
</div>
)}
</Tracks>
</Slider>
)
}