flutter slider edge does not use radius

Question

In the code below, I want to give a fixed radius to the edge of the slider, but when the thumb moves to the edge, the radius disappears and becomes angular.

Container(
            width: 370,
            height: 62,
            decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(
                  Radius.circular(10.0),
                )),
            child: SliderTheme(
              data: SliderThemeData(
                trackHeight: 60,
                trackShape:  RoundedRectSliderTrackShape(),
                thumbShape: SliderComponentShape.noOverlay,
                overlayShape: SliderComponentShape.noOverlay,
                valueIndicatorShape: SliderComponentShape.noOverlay,
                thumbColor: Colors.transparent,
                activeTickMarkColor: Colors.transparent,
                inactiveTickMarkColor: Colors.transparent,
                activeTrackColor: Colors.white,
              ),
              child: Slider(
                value: _sliderValue,
                min: 0.0,
                max: 100.0,
                onChanged: (value) {
                  setState(() {
                    _sliderValue = value;
                  });
                },
              ),
            ),
          ),

Answer 1

Seems like there's no way to do it with the provided SliderThemeData options. The minimal workaround is to use ClipRRect to clip the border of your slider widget to rounded shape, and use Transform.scale to "remove" the internal padding from the slider so that the left & right sides are clipped correctly.

ClipRRect(
  borderRadius: BorderRadius.circular(radius),
  child: Transform.scale(
    scaleX: 1.2,
    child: Slider(
      // ...
    ),
  ),
)