readout of SelectionRangeSlider is too narrow

[wingsof]

Hello,

For the selection of time range of datetime with format YYYY-MM-DD hh:mm, the only widget I could find was SelectionRangeSlider. But the problem is that the readout part is too narrow to display full period of range.

I shoud see full range of datetime like '2019-02-01 10:09 ~ 2019-10-29 14:56' to choose period of time.

I could see other issues telling me to manually change max-width of .widget-inline-hbox .widget-readout as well as increasing width of other to expand whole area of SelectionRangeSlider.

I think this is really one huge blocker of using SelectionRangeSlider. Do you have a plan to fix this problem or add style option on this?

[jasonmhite]

I encountered the same problem, the text is getting clipped. Increasing the width of the slider by passing e.g. layout={"width": "400px"} helps some in that it shows more of the text but it still clips it. I suspect there might be a way to style the text label to be wider but I can't figure it out from the docs.

[aguinaldoabbj]

Same issue here. A workaround would be editing directly the HTML contents with display.HTML as in #1939, but I haven't figured out how.

[marcusreaiche]

Hi,

I am having the same problem.

One workaround is set the readout equal to False and display the start and end values using a HTML widget that is updated whenever the SelectionRangeSlider is. You can wrap everything inside a widgets.HBox.

The following code snippet does the trick.

import pandas as pd
import ipywidgets as widgets

# Define date range
dates = pd.date_range(start="2016-04-13", periods=241, freq="H")

# First and last dates are selected by default
initial_selection = (0, len(dates) - 1)

# Define the date range slider: set readout to False
date_range_selector = widgets.SelectionRangeSlider(
    options=dates,
    index=initial_selection,
    continous_update=False,
    readout=False
)

# Define the display to substitute the readout
date_range_display = widgets.HTML(
    value=(
        f"<b>{dates[initial_selection[0]]}" + 
        f" - {dates[initial_selection[1]]}</b>"))

# Define the date range using the widgets.HBox
date_range = widgets.HBox(
    (date_range_selector, date_range_display))

# Callback function that updates the display
def callback(dts):
    date_range_display.value = f"<b>{dts[0]} - {dts[1]}</b>"

widgets.interactive_output(
    callback, 
    {"dts": date_range_selector})    

# The final object with the expected behaviour
date_range

Of course this does not solve the issue but I hope it can be useful!

[louiscr]

i was able to change the with by changing the html class definition as follows. `display(HTML(data="""""")) note that this might also affect other objecs that use this class