Zoom Slider

Control the zoom level with a range slider and display real-time feedback. This example uses setScale() method to adjust the chart zoom within the minimum and maximum scale boundaries.

Edit in BALKAN Code

HTML

<script src="https://cdn.balkan.app/orgchart.js"></script>
<div id="tree"></div>
<input id="range_scale" type="range" min="1" max="100" value="1">
<div id="txt_scale">1</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#tree {
    width: 100%;
    height: 100%;
}

#range_scale {
    width: 300px;
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#txt_scale {    
    position: absolute;
    bottom: 70px; 
    left: 50%; 
    transform: translate(-50%, 0); 
    color: #F57C00;
    font-size: 24px;
}

JavaScript

let sensitivity = 100;

let rangeScaleElement = document.getElementById('range_scale');
let txtScaleElement = document.getElementById('txt_scale');

let chart = new OrgChart(document.getElementById("tree"), {
    template: 'olivia',
    mouseScroll: OrgChart.action.ctrlZoom,
    enableSearch: false
});

chart.load([
    { id: 1 },
    { id: 2, pid: 1 },
    { id: 3, pid: 1 }
]);

chart.onInit(function(){
    rangeScaleElement.min = this.config.scaleMin * sensitivity;
    rangeScaleElement.max = this.config.scaleMax * sensitivity;    
    rangeScaleElement.value = this.getScale() * sensitivity;
});

rangeScaleElement.addEventListener('input', function(){
    chart.setScale(this.value / sensitivity);
    txtScaleElement.innerHTML = rangeScaleElement.value / sensitivity;
});

Key Features

• setScale() — Changes the zoom level based on slider position
• scaleMin/scaleMax — Automatically sets slider bounds from chart config
• Real-time Display — Updates zoom value text while dragging