blueprint/react: 滑块的自定义标签

Question

我正在尝试使用 labelRenderer 为蓝图滑块设置自定义标签。特别是，向用户显示一些文本，并要求他们在两种情绪之间做出决定（即，真正的答案是 0 或 1）。但是，为了赢得他们的信心，他们将有一个滑块，我希望他们从中选择一个值。

像这样

因此滑块标签的标签应该从一侧的“100%”变为“100%”

但是，蓝图滑块的 labelRenderer 甚至没有调用 renderLabel 函数，默认标签仍然显示。请注意，我只想更改滑块的标签，我仍然需要实际值介于 [0,1] 之间，以便后端工作更轻松。这是我的代码 (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>
    );
  }
}

Answer 1

这是因为我使用的是旧版本的 blueprint/core .. 特别是 1.x 是 renderLabel 而 2.x/3.x 是 labelRenderer

blueprint/react: 滑块的自定义标签

blueprint/react: custom labels for the slider

javascript

blueprint-css

blueprint

reactjs