Empirica Slider

Empirica Slider is a wrapper around BluePrintJS' slider to add a few extra features useful for developing experiments.

See https://blueprintjs.com/docs/#core/components/sliders for props supported by this component.

Usage

Add to your Empirica project with meteor add empirica:slider.

Example usage:

1import React from "react";
2import Slider from "meteor/empirica:slider";
3
4export default class MyComponent extends React.Component {
5  handleChange = num => {
6    const { stage, player } = this.props;
7    // Rounding the number to 2 decimals max
8    const value = Math.round(num * 100) / 100;
9    player.stage.set("someValue", value);
10  };
11
12  render() {
13    const { player } = this.props;
14    const value = player.stage.get("someValue");
15
16    return (
17      <Slider
18        hideHandleOnEmpty
19        min={0}
20        max={1}
21        stepSize={0.01}
22        labelStepSize={0.25}
23        value={value}
24        onChange={this.handleChange}
25      />
26    );
27  }
28}

Default Props

showTrackFill

Contrary to the Blueprint Slider default, showTrackFill defaults to false for the Empirica Slider, as it often makes more sense in the context of an experiment. You can still explicitely set it to true.

Additional Props

hideHandleOnEmpty (bool)

Default: false

When hideHandleOnEmpty is set to true, if the value prop is not defined, the slider handle will be hidden.