Bokeh Slider Styling / Labeling

I was wondering if it is possible to add labels to the Slider widget? I would like to add tick marks and labels and change the default font. I’ve included a picture of something similar to what I would like to do (thanks to Photoshop). If it is possible how would I do this in HTML, CSS or in python itself?

Thank you for the help,

Mark

Agree this would be great. But not easy.

You may be able to make some simple gains with css.

In this example - http://nbviewer.ipython.org/github/birdsarah/bokeh-miscellany/blob/master/notebooks/slider_example/Bubble%20plot.ipynb
I made some simple tweaks to the slider css - https://github.com/birdsarah/bokeh-miscellany/blob/master/notebooks/slider_example/assets/styles.css

I specifically had problems when I wanted to make the button wider - although I was trying to cover many more years than you’ve done.

I’ve googled around a bit looking at sliders, but want to do more - let me know if you make any progress.

I’m not aware of a way to just sub in your own html into a widget. The html template code lives in the js library e.g. https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/widget/slidertemplate.eco

What might work although I’ve never tried it would be:

  1. use a dropdown box as the input for your chart

  2. use a custom template to render everything - esp. with the new components method that’s coming out in 0.9.1 that lets you arrange items however you want

  3. in the custom template, use css to hide the dropdown and then use whatever slider you want and whatever js you want and make that js update the dropdown.

Sorry if this is not what you were hoping for.

I guess the short answer to your question is: in your own html & css, not in python.

Bird

···

On Mon, Jun 29, 2015 at 4:50 PM, Mark Warfel [email protected] wrote:

I was wondering if it is possible to add labels to the Slider widget? I would like to add tick marks and labels and change the default font. I’ve included a picture of something similar to what I would like to do (thanks to Photoshop). If it is possible how would I do this in HTML, CSS or in python itself?

Thank you for the help,

Mark

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/5b59c726-2e9c-4505-9822-7c9141e28741%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks for the help. Looking into solutions. I will update If I can figure it out!

Mark

···

On Tuesday, June 30, 2015 at 10:16:28 AM UTC-4, Sarah Bird wrote:

Agree this would be great. But not easy.

You may be able to make some simple gains with css.

In this example - http://nbviewer.ipython.org/github/birdsarah/bokeh-miscellany/blob/master/notebooks/slider_example/Bubble%20plot.ipynb
I made some simple tweaks to the slider css - https://github.com/birdsarah/bokeh-miscellany/blob/master/notebooks/slider_example/assets/styles.css

I specifically had problems when I wanted to make the button wider - although I was trying to cover many more years than you’ve done.

I’ve googled around a bit looking at sliders, but want to do more - let me know if you make any progress.

I’m not aware of a way to just sub in your own html into a widget. The html template code lives in the js library e.g. https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/widget/slidertemplate.eco

What might work although I’ve never tried it would be:

  1. use a dropdown box as the input for your chart
  1. use a custom template to render everything - esp. with the new components method that’s coming out in 0.9.1 that lets you arrange items however you want
  1. in the custom template, use css to hide the dropdown and then use whatever slider you want and whatever js you want and make that js update the dropdown.

Sorry if this is not what you were hoping for.

I guess the short answer to your question is: in your own html & css, not in python.

Bird

On Mon, Jun 29, 2015 at 4:50 PM, Mark Warfel [email protected] wrote:

I was wondering if it is possible to add labels to the Slider widget? I would like to add tick marks and labels and change the default font. I’ve included a picture of something similar to what I would like to do (thanks to Photoshop). If it is possible how would I do this in HTML, CSS or in python itself?

Thank you for the help,

Mark

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/5b59c726-2e9c-4505-9822-7c9141e28741%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.