JavaScript to change css style before property.

Hi,

I want two range sliders in bootstrap that when you move them, it changes two different css style properties.

Both range sliders will be from 0-100

The first range slider should change the border-width: 100px 100px 0 100px; as seen below. So the number in the range slider should change the three 100px values. All three of this should be the same and change with the slider

The second slider should change the left: 50%;

Thanks for bidding!

<style>
.triangle {
position: relative;
background: #2c3e50;
height: 50px;
}

.triangle::before {
content: '';
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #2c3e50 transparent transparent transparent;
left: 50%;
transform: translateX(-50%) translateY(100%);
}
</style>
<section class="triangle"></section>