Reducing the empty space between slider and readout text

[giswqs]

trafficstars

Is it possible to reduce the empty space (see the red rectangle below) between a slider and readout text? My current workaround is use disable the readout and add another Label widget next to the slider and use jslink. I wonder if there is a better way. Thanks.

import ipywidgets as widgets

vis_widget = widgets.VBox(
    layout=widgets.Layout(padding="5px 5px 5px 8px", width="330px")
)

color = widgets.ColorPicker(
    concise=False,
    value="#000000",
    description="Color:",
    layout=widgets.Layout(width="140px"),
    style={"description_width": "initial"},
)

opacity = widgets.FloatSlider(
    value=0.5,
    min=0,
    max=1,
    step=0.01,
    description="Opacity:",
    continuous_update=False,
    readout=True,
    readout_format=".2f",
    layout=widgets.Layout(width="320px"),
    style={"description_width": "50px"},
)

vis_widget.children = [widgets.HBox([color, opacity])]
vis_widget

Workaround

import ipywidgets as widgets

vis_widget = widgets.VBox(
    layout=widgets.Layout(padding="5px 5px 5px 8px", width="330px")
)

color = widgets.ColorPicker(
    concise=False,
    value="#000000",
    description="Color:",
    layout=widgets.Layout(width="140px"),
    style={"description_width": "initial"},
)

opacity = widgets.FloatSlider(
    value=0.5,
    min=0,
    max=1,
    step=0.01,
    description="Opacity:",
    continuous_update=True,
    readout=False,
#     readout_format=".2f",
    layout=widgets.Layout(width="120px"),
    style={"description_width": "50px"},
)

opacity_label = widgets.Label()
widgets.jslink((opacity, "value"), (opacity_label, "value"))

vis_widget.children = [widgets.HBox([color, opacity, opacity_label])]
vis_widget

[nvaytet]

The issue with the workaround is that you can't edit the value in the readout and press enter to set the slider value to some chosen value, which you can with the real slider readout.