I am trying to place 2 noUiSliders to the right of 3 other sliders since having multiple sliders takes up too much vertical space. My HTML page has 4 main tabs, and this all within a single tab, where I have one main collapsible header (Filters), which has further collapsible headers based on the type of filter ( Filters -> Phenotypic Data Filters)
I have 5 sliders in the Phenotypic Data Filters header which has an additional div called .slidercontainer because I wanted to restrict the width of the slider. Additionally each input header is linked to the Help tab which is what the href and onclick() functions are for.
I have tried setting up 2 different div for the slider (one with 3 and one with 2), with the purpose of trying to move the div with 2 sliders to the right, but I tried many ways and nothing seems to have worked.
My code is messy so please excuse that and it is below for reference:
Relevant CSS:
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 12px;
width: auto;
border: 1px solid ;
text-align: left;
outline: none;
font-size: 15px;
display: flex;
align-items: center;
}
.collapsible.active, .collapsible:hover {
background-color: #555;
}
.collapsible::before {
content: "25BA";
margin-right: 10px;
}
.active.collapsible::before {
content: "25BC";
}
.content {
padding: 0 18px;
display: none;
border: 1px solid ;
overflow: hidden;
background-color: #f1f1f1;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.slidecontainer {
width: 50%;
margin-left: 10px;
}
HTML:
<div class="collapsible">Phenotypic Data Filters</div>
<div class="content">
<button id="reset_all_sliders" class="reset-all-button">Reset ALL Sliders</button>
<br>
<a href="#" onclick="openTab(event, 'help', 'help_year')" style = "margin-left:10px;" id="year_help"> Year: </a> <input type="checkbox" name="year" value="2015" checked> 2015
<input type="checkbox" name="year" value="2016"> 2016
<input type="checkbox" name="year" value="2017"> 2017
<input type="checkbox" name="year" value="2018"> 2018
<br><br>
<a href="#" onclick="openTab(event, 'help', 'help_location')" style = "margin-left:10px;" id="location_help">Location: </a> <input type="checkbox" name="location" value="Channel-North"> Channel-North
<input type="checkbox" name="location" value="Channel-South"> Channel-South
<input type="checkbox" name="location" value="Creek-West"> Creek-West
<input type="checkbox" name="location" value="Creek-East"> Creek-East
<br><br>
<a href="#" onclick="openTab(event, 'help', 'help_mortality')" style = "margin-left:10px;" id="mortality_help">Mortality: </a> <input type="checkbox" name="mortality" value="Alive"> Alive
<input type="checkbox" name="mortality" value="Missing"> Missing
<input type="checkbox" name="mortality" value="Dead"> Dead
<input type="checkbox" name="mortality" value="New"> New
<br><br>
<div class="slidecontainer">
<a href="#" onclick="openTab(event, 'help', 'help_eco_vol')" id="eco_vol_help">Ecological Volume (units):</a>
<button id="eco_vol_reset" class="reset-button">Reset slider</button>
<div id="eco_vol_value" class="hover-value"></div><br><br><br><br>
<div id="eco_vol"></div>
<br><br><br>
<a href="#" onclick="openTab(event, 'help', 'help_ln_eco_vol')" id="ln_eco_vol_help">Natural Log of Ecological Volume (units):</a>
<button id="ln_eco_vol_reset" class="reset-button">Reset slider</button>
<div id="ln_eco_vol_value" class="hover-value"></div><br><br><br><br>
<div id="ln_eco_vol"></div>
<br><br><br>
<a href="#" onclick="openTab(event, 'help', 'help_length')" id="length_help">Length (cm):</a>
<button id="length_reset" class="reset-button">Reset slider</button>
<div id="length_value" class="hover-value"></div><br><br><br><br>
<div id="length"></div>
<br><br><br>
<a href="#" onclick="openTab(event, 'help', 'help_width')" id="width_help">Width (cm):</a>
<button id="width_reset" class="reset-button">Reset slider</button>
<div id="width_value" class="hover-value"></div><br><br><br><br>
<div id="width"></div>
<br><br><br>
<a href="#" onclick="openTab(event, 'help', 'help_height')" id="height_help">Height (cm):</a>
<button id="height_reset" class="reset-button">Reset slider</button>
<div id="height_value" class="hover-value"></div><br><br><br><br>
<div id="height"></div>
<br><br><br>
</div>
</div>
noUiSlider code:
// Sliders
var ecoVolSlider = document.getElementById('eco_vol');
var ecoVol_field = document.getElementById('eco_vol_value');
var lnEcoVolSlider = document.getElementById('ln_eco_vol');
var lnVol_field = document.getElementById('ln_eco_vol_value');
var alleleFreqSlider = document.getElementById('allele_freq');
var allele_field = document.getElementById('allele_freq_value');
var lengthSlider = document.getElementById('length');
var length_field = document.getElementById('length_value');
var widthSlider = document.getElementById('width');
var width_field = document.getElementById('width_value');
var heightSlider = document.getElementById('height');
var height_field = document.getElementById('height_value');
noUiSlider.create(ecoVolSlider, {
start: [0],
tooltips: true,
connect: 'lower',
behaviour: 'hover-snap',
range: {
'min': 0,
'max': 35000
},
pips: {
mode: 'values',
values: [0, 10000, 20000, 30000, 35000],
density: 4
}
});
ecoVolSlider.noUiSlider.on('update', function (values, handle) {
ecoVol_field.innerHTML = values[handle];
ecoVol_field.style.display = 'none';
});
noUiSlider.create(lnEcoVolSlider, {
start: [0],
tooltips: true,
connect: 'lower',
behaviour: 'hover-snap',
range: {
'min': -4,
'max': 12
},
pips: {
mode: 'values',
values: [-4, 0, 4, 8, 12],
density: 4
}
});
lnEcoVolSlider.noUiSlider.on('update', function (values, handle) {
lnVol_field.innerHTML = values[handle];
lnVol_field.style.display = 'none';
});
noUiSlider.create(lengthSlider, {
start: [0],
tooltips: true,
connect: 'lower',
behaviour: 'hover-snap',
range: {
'min': 0,
'max': 50
},
pips: {
mode: 'values',
values: [0, 10, 20, 30, 40, 50],
density: 4
}
});
lengthSlider.noUiSlider.on('update', function (values, handle) {
length_field.innerHTML = values[handle];
length_field.style.display = 'none';
});
noUiSlider.create(widthSlider, {
start: [0],
tooltips: true,
connect: 'lower',
behaviour: 'hover-snap',
range: {
'min': 0,
'max': 50
},
pips: {
mode: 'values',
values: [0, 10, 20, 30, 40, 50],
density: 4
}
});
widthSlider.noUiSlider.on('update', function (values, handle) {
width_field.innerHTML = values[handle];
width_field.style.display = 'none';
});
noUiSlider.create(heightSlider, {
start: [0],
tooltips: true,
connect: 'lower',
behaviour: 'hover-snap',
range: {
'min': 0,
'max': 25
},
pips: {
mode: 'values',
values: [0, 5, 10, 15, 20, 25],
density: 4
}
});
heightSlider.noUiSlider.on('update', function (values, handle) {
height_field.innerHTML = values[handle];
height_field.style.display = 'none';
});
Thank you in advance for your help and I appreciate any input!