Skip to content

Better rangeslider positioning #2453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alexcjohnson opened this issue Mar 7, 2018 · 6 comments
Open

Better rangeslider positioning #2453

alexcjohnson opened this issue Mar 7, 2018 · 6 comments
Labels
feature something new P3 backlog

Comments

@alexcjohnson
Copy link
Collaborator

As mentioned by @PavelGolodoniuc in #2443, rangesliders don't have very flexible positioning - they always go right below the associated axis (and tick labels if they're shown) and you can set their thickness as a fraction of plot area, but perhaps we could allow them to get a full domain: [bottom, top] or even domain: {x: [left, right], y: [bottom, top]} so you can control the width too, not be restricted to the same width as the x axis.

@arlowhite
Copy link

arlowhite commented Apr 23, 2018

Does this issue also cover using a rangeslider along the yaxis?
I want to use a rangeslider with {type: 'histogram', y: myData}
Or should I create a new GitHub issue to cover that situation?

yaxis rangeslider not working: https://codepen.io/arlowhite/pen/rvxKwB

@alexcjohnson
Copy link
Collaborator Author

@arlowhite y-axis range sliders would be a separate effort - feel free to create a new issue for it.

@dss010101
Copy link

is there a way to position the rangeslider under subplots? have 4 subplots..and it always appears just under the first and partially covers the 2nd subplot.

@ludomitch
Copy link

Is there a workaround to make this work?

@flightmansam
Copy link

Would love a good workaround for this

@filipesmg
Copy link

I did a small "hack" in js to move the slider (JQuery needed):

function move_slider(id,translation) {
    let slider = $(".rangeslider-container", `#${id}`)
    let regex = /\(([^)]+)\)/
    let translate = regex.exec(translation)[1].split(",").map((val) => { return parseInt(val); });
    let position = regex.exec(slider.attr("transform"))[1].split(",").map((val) => { return parseInt(val); });
    slider.attr("transform", `translate(${translate[0] + position[0]},${translate[1] + position[1]})`)

The id is the div.id of the plot and the translation variable should be something like '(0,-30)' to move it up by 30px (not sure about the units).

@gvwilson gvwilson self-assigned this Jun 11, 2024
@gvwilson gvwilson removed their assignment Aug 2, 2024
@gvwilson gvwilson added the P3 backlog label Aug 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature something new P3 backlog
Projects
None yet
Development

No branches or pull requests

7 participants