I am trying to have custom labels for the blueprint slider using labelRenderer. In particular, users are shown some text, and they are asked to decide between two sentiments (i.e., the true answer is 0 or 1). However, to capture their confidence, they will have a slider that I want them to choose a value from.
Something like this
So the labels of the slider labels should go from "100%" on one side to "100%"
However, the blueprint slider's labelRenderer is not even calling the renderLabel function and the default labels are still shown. Note that I only want to change the labels of the slider, I still need the actual values to be between [0,1] for the backend things to work easier. Here is my code (React.js):
import { Slider } from "@blueprintjs/core";
import React from "react";
export default class TaskResponse extends React.Component {
//this is to get the label between 100% & 100%
renderLabel= val => {
console.log("render label", val);
if (val === 0.5) {
return "Not sure";
} else if (val === 1) {
return "100% positive";
} else if (val === 0) {
return "100% negative";
} else {
return `${Math.abs(Math.round(val * 100)) - 50}%`;
}
};
renderSlider(player) {
const guess = player.round.get("guess");
return (
//no default value until the user inputs something (avoiding anchoring bias)
<div className={`pt-form-content ${guess === undefined ? "empty" : ""}`}>
<Slider
min={0}
max={1}
stepSize={0.01}
labelStepSize={0.25}
value={guess}
showTrackFill={false}
disabled={false}
labelRenderer={this.renderLabel}
/>
</div>
);
}
render() {
const { player } = this.props;
return (
<div className="task-response">
<form onSubmit={this.handleSubmit}>
<div className="pt-form-group">
{this.renderSlider(player)}
</div>
</form>
</div>
);
}
}
