126 lines
2.9 KiB
JavaScript
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>
|
|
)
|
|
}
|