Adjust the size of two sections using a slider to modify their width proportions

Question

Adjust the size of two sections using a slider to modify their width proportions

I am currently working on designing a component that allows for adjusting the width proportions of two blocks by using a slider to move them left and right: https://i.sstatic.net/Q85ab.png

Check out the CodePen and demo.

.outer {
  display: flex;
  flex-direction: row;
}

.block {
  height: 200px;
  width: -webkit-calc(50% - 5px);
  width: -moz-calc(50% - 5px);
  width: calc(50% - 5px);
}

.block-1 {
  background-color: red;
}

.block-2 {
  background-color: green;
}

.slider {
  line-height: 100%;
  width: 10px;
  background-color: #dee2e6;
  border: none;
  cursor: e-resize;
}

<div id="app">
  <div class="outer">
    <div class="block block-1">
      Block 1
    </div>
    <div class="slider">
      S<br>l<br>i<br>d<br>e<br>r
    </div>
    <div class="block block-2">
      Block 2
    </div>
  </div>
</div>

I've attempted utilizing the draggable-vue-directive to change the block widths based on the slider's position.

Unfortunately, it didn't work as expected because the draggable-vue-directive set the slider to position:fixed, causing alignment issues with the blocks.

How can I enable horizontal dragging for the .slider block without using position:fixed?

What is the correct way to resize Block1 and Block2 when the slider is moved?

Please note: I am not using jQuery

javascript css vue.js flexbox

Answer 1

Answer №1

Modify your flexbox in conjunction with resize - the drawback being that the level of customization for the slider is limited:

Include resize: horizontal to one of the flex items
Add flex: 1 to the other flex item (so that this flex item automatically adjusts in response to the changing width of the other flex item as it is resized)

View demo below:

.outer {
  display: flex;
  flex-direction: row;
}

.block {
  height: 100px;
  width: 50%; /* 50% would suffice*/
}

.block-1 {
  background-color: red;
  resize: horizontal; /* resize horizontal */
  overflow: hidden; /* resize works for overflow other than visible */
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
}

<div id="app">
  <div class="outer">
    <div class="block block-1">
      Block 1
    </div>
    <div class="block block-2">
      Block 2
    </div>
  </div>
</div>

To tackle this without relying on the resize approach mentioned above, let's utilize vanilla JS:

Implement a mousedown listener that tracks a mousemove listener updating the width of block-1 (and resetting the mouseup event)
Consider adding min-width: 0 to override min-width: auto of the block-2 element

View demo below:

let block = document.querySelector(".block-1"),
  slider = document.querySelector(".slider");

slider.onmousedown = function dragMouseDown(e) {
  let dragX = e.clientX;
  document.onmousemove = function onMouseMove(e) {
    block.style.width = block.offsetWidth + e.clientX - dragX + "px";
    dragX = e.clientX;
  }
  // remove mouse-move listener on mouse-up
  document.onmouseup = () => document.onmousemove = document.onmouseup = null;
}

.outer {
  display: flex;
  flex-direction: row;
}

.block {
  height: 100px;
  width: 50%; /* 50% would suffice*/
}

.block-1 {
  background-color: red;
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
  min-width: 0; /* allow flexing beyond auto width */
  overflow: hidden; /* hide overflow on small width */
}

.slider {
  line-height: 100%;
  width: 10px;
  background-color: #dee2e6;
  border: none;
  cursor: col-resize;
  user-select: none; /* disable selection */
  text-align: center;
}

<div id="app">
  <div class="outer">
    <div class="block block-1">
      Block 1
    </div>
    <div class="slider">
      S<br>l<br>i<br>d<br>e<br>r
    </div>
    <div class="block block-2">
      Block 2
    </div>
  </div>
</div>

Solution

You can easily adapt the above into Vue without any custom Vue plugins - here are the modifications:

@mousedown listener on slider which triggers the slider
utilization of refs to update the width of block-1

View demo below:

new Vue({
  el: '#app',
  data: {
    block1W: '50%'
  },
  methods: {
    drag: function(e) {
      let dragX = e.clientX;
      let block = this.$refs.block1;
      document.onmousemove = function onMouseMove(e) {
        block.style.width = block.offsetWidth + e.clientX - dragX + "px";
        dragX = e.clientX;
      }
      // remove mouse-move listener on mouse-up
      document.onmouseup = () => document.onmousemove = document.onmouseup = null;
    }
  }
});

.outer {
  display: flex;
  flex-direction: row;
}

.block {
  height: 100px;
  width: 50%; /* 50% would suffice*/
}

.block-1 {
  background-color: red;
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
  min-width: 0; /* allow flexing beyond auto width */
  overflow: hidden; /* hide overflow on small width */
}

.slider {
  line-height: 100%;
  width: 10px;
  background-color: #dee2e6;
  border: none;
  cursor: col-resize;
  user-select: none; /* disable selection */
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="outer">
    <div class="block block-1" ref="block1" :style="{'width': block1W}">
      Block 1
    </div>
    <div class="slider" @mousedown="drag">
      S<br>l<br>i<br>d<br>e<br>r
    </div>
    <div class="block block-2">
      Block 2
    </div>
  </div>
</div>

Answer 2

Modify your flexbox in conjunction with resize - the drawback being that the level of customization for the slider is limited:

Include resize: horizontal to one of the flex items
Add flex: 1 to the other flex item (so that this flex item automatically adjusts in response to the changing width of the other flex item as it is resized)

View demo below:

.outer {
  display: flex;
  flex-direction: row;
}

.block {
  height: 100px;
  width: 50%; /* 50% would suffice*/
}

.block-1 {
  background-color: red;
  resize: horizontal; /* resize horizontal */
  overflow: hidden; /* resize works for overflow other than visible */
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
}

<div id="app">
  <div class="outer">
    <div class="block block-1">
      Block 1
    </div>
    <div class="block block-2">
      Block 2
    </div>
  </div>
</div>

To tackle this without relying on the resize approach mentioned above, let's utilize vanilla JS:

Implement a mousedown listener that tracks a mousemove listener updating the width of block-1 (and resetting the mouseup event)
Consider adding min-width: 0 to override min-width: auto of the block-2 element

View demo below:

let block = document.querySelector(".block-1"),
  slider = document.querySelector(".slider");

slider.onmousedown = function dragMouseDown(e) {
  let dragX = e.clientX;
  document.onmousemove = function onMouseMove(e) {
    block.style.width = block.offsetWidth + e.clientX - dragX + "px";
    dragX = e.clientX;
  }
  // remove mouse-move listener on mouse-up
  document.onmouseup = () => document.onmousemove = document.onmouseup = null;
}

.outer {
  display: flex;
  flex-direction: row;
}

.block {
  height: 100px;
  width: 50%; /* 50% would suffice*/
}

.block-1 {
  background-color: red;
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
  min-width: 0; /* allow flexing beyond auto width */
  overflow: hidden; /* hide overflow on small width */
}

.slider {
  line-height: 100%;
  width: 10px;
  background-color: #dee2e6;
  border: none;
  cursor: col-resize;
  user-select: none; /* disable selection */
  text-align: center;
}

<div id="app">
  <div class="outer">
    <div class="block block-1">
      Block 1
    </div>
    <div class="slider">
      S<br>l<br>i<br>d<br>e<br>r
    </div>
    <div class="block block-2">
      Block 2
    </div>
  </div>
</div>

Solution

You can easily adapt the above into Vue without any custom Vue plugins - here are the modifications:

@mousedown listener on slider which triggers the slider
utilization of refs to update the width of block-1

View demo below:

new Vue({
  el: '#app',
  data: {
    block1W: '50%'
  },
  methods: {
    drag: function(e) {
      let dragX = e.clientX;
      let block = this.$refs.block1;
      document.onmousemove = function onMouseMove(e) {
        block.style.width = block.offsetWidth + e.clientX - dragX + "px";
        dragX = e.clientX;
      }
      // remove mouse-move listener on mouse-up
      document.onmouseup = () => document.onmousemove = document.onmouseup = null;
    }
  }
});

.outer {
  display: flex;
  flex-direction: row;
}

.block {
  height: 100px;
  width: 50%; /* 50% would suffice*/
}

.block-1 {
  background-color: red;
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
  min-width: 0; /* allow flexing beyond auto width */
  overflow: hidden; /* hide overflow on small width */
}

.slider {
  line-height: 100%;
  width: 10px;
  background-color: #dee2e6;
  border: none;
  cursor: col-resize;
  user-select: none; /* disable selection */
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="outer">
    <div class="block block-1" ref="block1" :style="{'width': block1W}">
      Block 1
    </div>
    <div class="slider" @mousedown="drag">
      S<br>l<br>i<br>d<br>e<br>r
    </div>
    <div class="block block-2">
      Block 2
    </div>
  </div>
</div>

Adjust the size of two sections using a slider to modify their width proportions

Answer №1

Solution

Similar questions

changing a Vue.js boolean value through a template

Exploring Angular and Node.js to Retrieve Image Dimensions

(Display a loading animation while resolving in Angular-ui-router)

Navigating a complex web: Djikstra algorithm applied to a multigraph

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

Solutions for organizing backend data arrays by date and month

Gridlines Collapse upon Rendering in the Griddle Subgrids

Creating a responsive and expandable table using HTML and JavaScript

``Trouble with React Dropdown menu option selection"

Disable button not necessary when validating checkboxes

The image link in HTML and CSS is no longer functioning properly following the relocation of the image

Utilizing a callback within a conditional statement in VueJS: A step-by-step guide

Highlighted text with CSS

Unlock the power of two-way data binding in Vuex using the mapGetter helper

What is the best way to receive the result of an asynchronous function as an input and showcase it using express?

Is it possible to protect assets aside from JavaScript in Nodewebkit?

When a button is clicked, the v-bind class is no longer applied

How to use AngularJS to parse JSON containing backslashes

My function invocations seem to be malfunctioning

Tips on resolving the issue of passing a string value as a number in a JS function parameter when working with