Wondering whether it's posible to merge two slider (x and x_inv) into one while clipping volume?

[Yuvi-416]

Hello everyone, I'm trying to clip the volume from both sides X and its X inv; for this, I wrote the code below, which works reasonably well for the time being; but, for the sake of the user's convenience, I'm now attempting to merge these two inputs into one. Currently, I have something like this: I was looking for some examples relating to my issue but couldn't find any, therefore I'm wondering if it's possible to utilize noUiSlider in my case. If it is then how can I proceed? I am looking for a little bit of a hint to start if it's possible.

HTML:

<tr>
      <td> X
             <input class="planePositionX_inv" type="range" min="0" max="100" step="1" value="">
       </td>
       <td>
             <input class="planePositionX" type="range" min="0" max="100" step="1" value="" style="-webkit-transform: rotate(180deg);">
         </td>
</tr>

JS file:

            let el = document.querySelector('.planePositionX');
            el.setAttribute('min', ((-sizeX) + img_origin_X));
            el.setAttribute('max', img_origin_X);
            el.setAttribute('value', ((-sizeX) + img_origin_X));

            el = document.querySelector('.planePositionX_inv');
            el.setAttribute('min', img_origin_X);
            el.setAttribute('max', (sizeX + img_origin_X));
            el.setAttribute('value', img_origin_X);

             document.querySelector('.planePositionX').addEventListener('input', (e) => {
            clipPlane1PositionX = Number(e.target.value);
            console.log(clipPlane1PositionX)
            const clipPlaneOriginX = [clipPlane1PositionX * clipPlaneNormalX[0], clipPlane1PositionX * clipPlaneNormalX[1], clipPlane1PositionX * clipPlaneNormalX[2], ];
            clipPlaneX.setOrigin(clipPlaneOriginX);
            renderWindow.render();
            });

            document.querySelector('.planePositionX_inv').addEventListener('input', (e) => {
            clipPlane1PositionX_inv = Number(e.target.value);
            console.log(clipPlane1PositionX_inv)
            const clipPlaneOriginX_inv = [clipPlane1PositionX_inv * clipPlaneNormalX_inv[0], clipPlane1PositionX_inv * clipPlaneNormalX_inv[1], clipPlane1PositionX_inv * clipPlaneNormalX_inv[2], ];
            clipPlaneX_inv.setOrigin(clipPlaneOriginX_inv);
            renderWindow.render();
            });

Thank you!

[leongersen]

I'm not sure what you are trying to do, but if you are looking to have to handles in one slider with a connecting part, have a look at the connect option.

[Yuvi-416]

Thanks for the reply. Sorry if I wasn't clear about what I was searching for. I've included a video below so you can see what I'm talking about. I am trying to implement the slider which can clip from both slides. screen-capture.webm

[leongersen]

Yes, that should be possible with a slider with two handles. Feel free to comment if you have more questions.

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.