For a canny filter, we need a few more parameters to configure. In a canny filter, we need to define two thresholds and the aperture size. To manage both of them, we are going to create input range elements for each one:
<div id="step3_o3" class="step_blocks hide"> <span class="step">3</span> Threshold 1: <span id="value_o3_1_sel">100</span> <input type="range" class="custom-range" min="0" max="255" value="100" id="value_o3_1"> Threshold 2: <span id="value_o3_2_sel">150</span> <input type="range" class="custom-range" min="0" max="255" value="150" id="value_o3_2"> Aperture size: <span id="value_o3_sel">3</span> <input type="range" class="custom-range" min="3" max="7" value="3" step="2" id="value_o3"> </div>
Finally, to finish ...
