How to make roundSlider and Jquery-UI slider responsive and work with boostrap

105
January 01, 2020, at 2:10 PM

I am trying to put together a Boostrap 4 card that has thermostat control user interface. Below are parts of my code (full code is here: https://jsfiddle.net/op6mef5k/2/)

this is my vertical-slider:

<div id="boost">
  <span>Boost</span>
  <div id="boostSlider"></div>
</div>

and this is my roundSLider:

<div class="cell my-auto mx-auto">
 <div class="thermostatSlider"></div>
</div>

this is the picture of how they look now:

this is the picture that illustrates my problem:

I would like to achieve a layout that looks nice over all resolutions, without any anomalies

My problem is that I use jquery roundSLider plugin and vertical slider from jquery-ui. I am having difficulties making them work nice and responsive. I did managed already to do some "hacks" and a lot of work to be better than initially, but it's far from perfect. Example of such hack is that i redraw roundSLider every time window resizes: (https://jsfiddle.net/op6mef5k/2/)

  this._bind($(window), "resize", function () {
    var radius = (this.control.parent().width())/2;
    this.option("radius", radius);
  });

Basically, on each window resize, before create function is called which renders roundSLider again by calculating its new radius based on paren't width. And kind-of makes it fit into setup.

I also did similiar thing with jqueryui vertical slider (basically i add height to it based on the height of roundSlider parent div):

  $( window ).resize(function() {
    var divHeight = $(".cell").height();
    var height = divHeight/2;
    console.log(divHeight);
    console.log(height);
    $( "#boost" ).height(height);
});

I am still not happy how this all looks like. Basically I want to achieve as nice as possible scalling when window resizes with as least as possible anomalies.

Also the second bigest problem with this setup is that I don't know how to position vertical slider a litle closer to the round slider and always in the middle Y-axis of roundSlider no matter how the window resizes. And when it falls down below roundSlider, I want it to scale nicely with the roundSlider aswell as that it has a nice and constant margin away from other elements in the card.

In order to try to hack into this, I did stuff like this in css:

@media (min-width: 320px) {
    .cell {
      width: 100%;
    }
}
@media (min-width: 480px) {
    .cell {
      width: 75%;
    }
}
@media (min-width: 667px) {
    .cell {
      width: 70%;
    }
}
@media (min-width: 768px) {
    .cell {
      width: 100%;
    }
}
@media (min-width: 1600px) {
    .cell {
      width: 85%;
    }
}

Basically I watched in chrome's window how it all changes based on different resolutions and iteratively applied style to try and correct things, for example, I've changed .cell width (parent div of roundSlider to control how much space does the roundSlider take up in each resolution, but I hate this approach, because I can never fully achieve what I want, and I feel like it is hack (coming from the background of programmer rather than designer).

Is it possible to achieve what I am looking for in this setup and with these elements or is this exercise in futility?

Below is the best example of what I am trying to achieve in terms of layout and responsivnes, it is on this page (https://sys.prosmartsystem.com/?demo=demo@pss.com):

READ ALSO
Animation in JavaScript/jQuery with arrays

Animation in JavaScript/jQuery with arrays

I'm trying to display an animation for every object in an arrayI have some difficulties to "connect" all codes and scripts

111
Adding Link to Quill editor causes text after link to overflow

Adding Link to Quill editor causes text after link to overflow

Adding a link using the add link tool from the tooloptions allows me to add a link but after saving the data from the editor and refreshing the page the text after the link overflows the texteditor

98
How to center elements on the last row in CSS Grid?

How to center elements on the last row in CSS Grid?

I am using CSS grid to layout some items like this

77
Gatsby 1 Class Component

Gatsby 1 Class Component

I'm trying to understand the logic of this component called AppMounted in a layout (Gatsby 1)

98