Vertical orientation for `gr.Slider`

[Xynonners]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.

I have some UI design that vertical sliders would fit better than horizontal ones, and was hoping it could be a thing in gradio.

[abidlabs]

Hi @Xynonners I'm not sure what you mean by vertical sliders. Can you elaborate, perhaps provide a UI mockup?

[abidlabs]

Closing for lack of followup

[drscotthawley]

@abidlabs I just asked the same question on HF Discord: 1104129830750011464

We mean sliders with a vertical orientation rather than a horizontal one, so that the user slides the marker up and down instead of left to right.

[abidlabs]

Got it @drscotthawley! Not possible right now, but we can open it up as a feature request

[drscotthawley]

@abidlabs Cool! Looks like it might be a super-simple, almost automatic change!:

https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically

First, set height greater than width. In theory, this is all you should need. The HTML5 Spec suggests as much:

... the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties.

In fact, I might just go ahead and try adding some css to the Slider's elem_id and see if it happens automatically 🤔

Update: Nope, that didn't work:

import gradio as gr

def sentence_builder(quantity, animal, countries, place, activity_list, morning):
    return f"""The {quantity} {animal}s from {" and ".join(countries)} went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""

demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4, label="Count", info="Choose betwen 2 and 20", elem_id="slider1"),
        gr.Dropdown(
            ["cat", "dog", "bird"], label="Animal", info="Will add more animals later!"
        ),
        gr.CheckboxGroup(["USA", "Japan", "Pakistan"], label="Countries", info="Where are they from?"),
        gr.Radio(["park", "zoo", "road"], label="Location", info="Where did they go?"),
        gr.Dropdown(
            ["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True, label="Activity", info="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, eget aliquam nisl nunc vel nisl."
        ),
        gr.Checkbox(label="Morning", info="Did they do it in the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", ["Japan", "Pakistan"], "park", ["ate", "swam"], True],
        [4, "dog", ["Japan"], "zoo", ["ate", "swam"], False],
        [10, "bird", ["USA", "Pakistan"], "road", ["ran"], False],
        [8, "cat", ["Pakistan"], "zoo", ["ate"], True],
    ]
    ,
    css = "#slider1 {height: 200px; width:40px}"
)

if __name__ == "__main__":
    demo.launch()

Also tried CSS that should work, i.e. works on a test standalone web page I tried, but doesn't work if I pass this into Gradio's gr.Interface:

    css = """#slider1 {
  height: 200px;
  border-radius: 5px;
  background: #ccc;
  outline: none;
  writing-mode: bt-lr;
  /* IE */
  -webkit-appearance: slider-vertical;
  /* WebKit */
}"""

[drscotthawley]

Hey @abidlabs one little hack I found: it is currently possible in existing Gradio via CSS if the user is willing to rotate the entire element, text included. But this is probably not what most people will want LOL:

Sample Colab: https://colab.research.google.com/drive/1zHOv8xguHo4mlw0gt0iZVORfaZdGz6vE?usp=sharing

[abidlabs]

Hey! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.

[abidlabs]

I'll go ahead and close this issue since we are not planning to include this in the core Gradio library. But happy to help if you are interested in making this a custom Gradio component (feel free to ask questions in this issue).