Select

A Slider component for displaying current value and intervals in range.

Import: import { Select } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

When To Use

To input a value in a range.

Basic Slider

Basic Slider. The size of the Slider can be set by the prop of size.

() => {
  return (
     <>
        <Slider defaultValue={60} size="xs" styles={{ marginTop: 25 }} />
        <Slider defaultValue={60} size="sm" styles={{ marginTop: 25 }} />
        <Slider defaultValue={60} size="md" styles={{ marginTop: 25 }} />
        <Slider defaultValue={60} size="lg" styles={{ marginTop: 25 }} />
        <Slider defaultValue={60} size="xl" styles={{ marginTop: 25 }} />
        <RangeSlider defaultValue={[20, 80]} max={100} min={0} styles={{ marginTop: 25 }}/>
      </>
  )
}

1
() => {
2
  return (
3
     <>
4
        <Slider defaultValue={60} size="xs" styles={{ marginTop: 25 }} />
5
        <Slider defaultValue={60} size="sm" styles={{ marginTop: 25 }} />
6
        <Slider defaultValue={60} size="md" styles={{ marginTop: 25 }} />
7
        <Slider defaultValue={60} size="lg" styles={{ marginTop: 25 }} />
8
        <Slider defaultValue={60} size="xl" styles={{ marginTop: 25 }} />
9
        <RangeSlider defaultValue={[20, 80]} max={100} min={0} styles={{ marginTop: 25 }}/>
10
      </>
11
  )
12
}
13

Disabled Status

() => {
  return (
    <>
     <Slider defaultValue={60} styles={{ marginTop: 25 }} disabled />
     <RangeSlider defaultValue={[20, 80]} max={100} min={0} styles={{ marginTop: 25 }} disabled />
    </>
  )
}

1
() => {
2
  return (
3
    <>
4
     <Slider defaultValue={60} styles={{ marginTop: 25 }} disabled />
5
     <RangeSlider defaultValue={[20, 80]} max={100} min={0} styles={{ marginTop: 25 }} disabled />
6
    </>
7
  )
8
}
9

Single Slider

Single slider can set uniform scale and uneven scale. If the weight is not passed in marks, the default is uniform scale.

() => {
  return (
     <Slider
        marks={[
           { value: 0, label: '0' },
           { value: 20, label: '20%' },
           { value: 50, label: '50%' },
           { value: 80, label: '80%' },
           { value: 100, label: '100%' },
        ]}
     />
  )
}

1
() => {
2
  return (
3
     <Slider
4
        marks={[
5
           { value: 0, label: '0' },
6
           { value: 20, label: '20%' },
7
           { value: 50, label: '50%' },
8
           { value: 80, label: '80%' },
9
           { value: 100, label: '100%' },
10
        ]}
11
     />
12
  )
13
}
14

Range Slider

() => {
  const marks = [
    { value: 0, label: '0' },
    { value: 20, label: '20%' },
    { value: 50, label: '50%' },
    { value: 80, label: '80%' },
    { value: 100, label: '100%' },
  ];
  return <RangeSlider decimals={0} defaultValue={[20, 80]} marks={marks} />;
};

1
() => {
2
  const marks = [
3
    { value: 0, label: '0' },
4
    { value: 20, label: '20%' },
5
    { value: 50, label: '50%' },
6
    { value: 80, label: '80%' },
7
    { value: 100, label: '100%' },
8
  ];
9
  return <RangeSlider decimals={0} defaultValue={[20, 80]} marks={marks} />;
10
};
11

Uneven Slider

The Uneven scale can be set by passing the weight prop in marks.

MinRange can set minimal range interval of Slider，if it less than 1, decimals is required to set when move the Slider。

() => {
  return (
    <RangeSlider
      marks={[
        { value: 0, label: '无限制', weight: 2 },
        { value: 0.2, label: 0.2, weight: 2 },
        { value: 0.5, label: 0.5, weight: 2 },
        { value: 1, label: 1, weight: 1 },
        { value: 2, label: 2, weight: 2 },
        { value: 3, label: 3, weight: 1 },
        { value: 4, label: 4 },
        { value: 100, label: 100, weight: 1 },
      ]}
      defaultValue={[2, 3]}
      minRange={0.01}
      decimals={2}
    />
  )
};

1
() => {
2
  return (
3
    <RangeSlider
4
      marks={[
5
        { value: 0, label: '无限制', weight: 2 },
6
        { value: 0.2, label: 0.2, weight: 2 },
7
        { value: 0.5, label: 0.5, weight: 2 },
8
        { value: 1, label: 1, weight: 1 },
9
        { value: 2, label: 2, weight: 2 },
10
        { value: 3, label: 3, weight: 1 },
11
        { value: 4, label: 4 },
12
        { value: 100, label: 100, weight: 1 },
13
      ]}
14
      defaultValue={[2, 3]}
15
      minRange={0.01}
16
      decimals={2}
17
    />
18
  )
19
};
20

Controlled

By default, both Slider and RangeSlider are uncontrolled, add onChange and value props to make them controlled:

() => {
  const [value, setValue] = React.useState(40);
  const [rangeValue, setRangeValue] = React.useState([20, 80]);
  return (
    <>
      <Slider value={value} onChange={setValue} styles={{ marginTop: 25 }}/>
      <RangeSlider value={rangeValue} onChange={setRangeValue} styles={{ marginTop: 25 }}/>
    </>
  )
}

1
() => {
2
  const [value, setValue] = React.useState(40);
3
  const [rangeValue, setRangeValue] = React.useState([20, 80]);
4
  return (
5
    <>
6
      <Slider value={value} onChange={setValue} styles={{ marginTop: 25 }}/>
7
      <RangeSlider value={rangeValue} onChange={setRangeValue} styles={{ marginTop: 25 }}/>
8
    </>
9
  )
10
}
11