CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/components/misc/integer-slider.tsx
Views: 687
1
import { Button, Slider, InputNumber, Row, Col, Tag } from "antd";

2
import { useState } from "react";

3
import { COLORS as COLORS_THEME } from "@cocalc/util/theme";

4


5
interface Props {

6
  min: number;

7
  max: number;

8
  maxText?: number;

9
  value?: number;

10
  defaultValue?: number;

11
  initialValue?: number;

12
  onChange: (number) => void;

13
  units?: string;

14
  presets?: number[];

15
  disabled?: boolean;

16
  step?: number;

17
}

18


19
export default function IntegerSlider({

20
  value,

21
  onChange,

22
  min,

23
  max,

24
  maxText,

25
  defaultValue,

26
  initialValue,

27
  units,

28
  presets,

29
  disabled = false,

30
  step = 1,

31
}: Props) {

32
  function toNumber(x) {

33
    return typeof x === "number" ? x : min;

34
  }

35
  const [val, setVal] = useState<number>(

36
    value ?? initialValue ?? defaultValue ?? min

37
  );

38


39
  return (

40
    <>

41
      <Row justify="space-between">

42
        <Col xs={24} sm={12} flex="auto">

43
          <Slider

44
            disabled={disabled}

45
            style={{ width: "100%" }}

46
            min={min}

47
            max={max}

48
            onChange={(x) => {

49
              onChange(x);

50
              setVal(x);

51
            }}

52
            value={value != null ? toNumber(value) : val}

53
            defaultValue={initialValue}

54
            step={step}

55
          />

56
        </Col>

57
        <Col xs={24} sm={12} md={8}>

58
          <InputNumber

59
            min={min}

60
            max={maxText ?? max}

61
            step={step}

62
            disabled={disabled}

63
            style={{

64
              marginLeft: "16px",

65
              marginBottom: "5px",

66
              minWidth: "8ex",

67
              width: "20ex",

68
            }}

69
            defaultValue={initialValue}

70
            value={value ?? val}

71
            onChange={(value) => {

72
              let val = toNumber(value);

73
              if (step !== 1) {

74
                // quantize val to a multiple of step

75
                val = Math.round(val / step) * step;

76
              }

77
              onChange(val);

78
              setVal(val);

79
            }}

80
            addonAfter={units}

81
          />

82
          {defaultValue != null && (

83
            <Button

84
              type="dashed"

85
              disabled={disabled || (value ?? val) == defaultValue}

86
              style={{ marginLeft: "5px" }}

87
              onClick={() => {

88
                onChange(defaultValue);

89
                setVal(defaultValue);

90
              }}

91
            >

92
              Default: {defaultValue}

93
            </Button>

94
          )}

95
        </Col>

96
      </Row>

97
      {presets && (

98
        <div>

99
          {presets.map((number) => (

100
            <Tag

101
              key={number}

102
              color={disabled ? COLORS_THEME.GRAY_LL : "blue"}

103
              style={{ cursor: disabled ? "not-allowed" : "pointer" }}

104
              onClick={() => {

105
                if (disabled) return;

106
                onChange(number);

107
                setVal(number);

108
              }}

109
            >

110
              {number}

111
            </Tag>

112
          ))}

113
        </div>

114
      )}

115
    </>

116
  );

117
}

118


119