# Clipping through XZ plane on range slider

**URL:** <https://discourse.threejs.org/t/clipping-through-xz-plane-on-range-slider/5933>\
**Category:** Questions\
**Tags:** user-interface, clipping\
**Created:** [January 30, 2019, 10:56am UTC](https://discourse.threejs.org/t/clipping-through-xz-plane-on-range-slider/5933 "2019-01-30T10:56:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nilesh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nilesh/32/5663_2.png) [@Nilesh](https://discourse.threejs.org/u/Nilesh)\
**Post date:** [January 30, 2019, 10:56am UTC](https://discourse.threejs.org/t/clipping-through-xz-plane-on-range-slider/5933/1 "2019-01-30T10:56:22Z")

</div>

Hello,  
I want to clip my mesh data through XZ plane (along Y-Plane) using range slider.  
I saw threejs example of clipping.

[https://threejs.org/examples/?q=cli#webgl\_clipping](https://threejs.org/examples/?q=cli#webgl_clipping)

I tried that functionality but not able to clip the mesh through range slider.  
But able to clip that mesh using dat.gui folder.  
I send the screenshot which i want ,  
 ![Clip](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/4ca53538a7da9e51127c75806e31d18c5e6790f5.png)  
Please give me suggestion .  
Thanks.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 30, 2019, 11:51am UTC](https://discourse.threejs.org/t/clipping-through-xz-plane-on-range-slider/5933/2 "2019-01-30T11:51:39Z")

</div>

Are you looking for something like this?

[https://jsfiddle.net/voywz4sj/](https://jsfiddle.net/voywz4sj/)

After defining the markup of your slider, do this in your JavaScript:

```auto
const slider = document.getElementById( 'slider' );
	
slider.addEventListener( 'input', ( event ) => {
	
    const value = parseFloat( event.target.value );
	
    localPlane.constant = value * 0.01;
	
} );

```

---

<div class="post-metadata">

**Author:** ![Nilesh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nilesh/32/5663_2.png) [@Nilesh](https://discourse.threejs.org/u/Nilesh)\
**Post date:** [January 31, 2019, 4:59am UTC](https://discourse.threejs.org/t/clipping-through-xz-plane-on-range-slider/5933/3 "2019-01-31T04:59:06Z")

</div>

Hi,  
Thanks for suggestion!!  
Your suggested way solve my slider issue however i am getting cut body by default like this:  
 ![cut%20body](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d6daabe2cd635862cdde8c57c9149a0fa1154662.png)  
But i don’t want section cut body by default.  
i want full body by default and only cut it after moving slider.

I want one more suggestion,  
i have set min and max value of slider as min bounding box and max bounding of body.  
but it is not working properly. refer below image  
 ![cut%20body1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/7584ac407cf48a6b5b11239b23a985a4e1296372.png)  
upper surface is gets cut always.Unable to set min and max value.

Thanks