Baseweb: [Slider] click[touch] area of a track is too narrow, impossible to change the value by clicking on [touching] the track

Created on 22 Jul 2020 · 2Comments · Source: uber/baseweb

Current Behavior

If you have only 2-3-4 steps in the slider it's almost impossible to change the value by clicking on [touching] the track.
Also when you start pulling the thumb you have to move it precisely on the desired value or it won't change.

Stackblitz to try

import * as React from "react";
import { Slider } from "baseui/slider";

export default () => {
  const [value, setValue] = React.useState([1000]);
  return (
    <Slider
      value={value}
      onChange={({ value }) => value && setValue(value)}
      onFinalChange={({ value }) => console.log(value)}
      min={500}
      max={1500}
      step={500}
    />
  );
}

Expected Behavior

Clicking on [touching] the track should change to the next closest step. Previous one if you click after the thumb or the next one if you click before the thumb.

When you start pulling thumb, the slider should change the value to the closest tick on track at the time you released the thumb.