/* 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: 32.5, borderRadius: 5, backgroundColor: 'lightgrey', } /* Support functions */ function Handle({ handle: { id, value, percent }, getHandleProps, displayFunction, handleWidth }) { return ( <>
{displayFunction(value)}
) } function Track({ source, target, getTrackProps }) { return (
) } /* Body */ // Two functions, essentially identical. export function SliderElement({ onChange, value, displayFunction }) { let toLogDomain = (arr) => [Math.log(arr[0])/Math.log(10), Math.log(arr[1])/Math.log(10)] return ( {({ getRailProps }) => (
)} {({ handles, getHandleProps }) => (
{handles.map(handle => ( ))}
)}
{({ tracks, getTrackProps }) => (
{tracks.map(({ id, source, target }) => ( ))}
)}
) } export function SubmitSliderButton({posList, binaryComparisons, sliderValue, toComparePair, nextStepSlider}){ // This element didn't necessarily have to exist, but it made it easier for debugging purposes let onClick = (event) => { //event.preventDefault(); let obj = {posList, binaryComparisons, sliderValue, element1: toComparePair[1], element2: toComparePair[0]} // console.log("input@SubmitSliderButton") console.log(obj) nextStepSlider(obj) } return( ) }