HTML alignment and javascript issue
Question
I'm trying to make a slider in HTML and I'm having two issues.
- I'm trying to get the following group of elements to show up horizontally in a line
[checkbox][color-box][slider][slider-value]. But for some reason the color box is causing the line to wrap. The code I have for this is:
.color-box {
width: 20px;
height:20px;
margin:5px;
border: 1px solid black;
}
<div class="type-controls">
<input type="checkbox" >
<div class="color-box"</div>
<input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">
<output for=fader id=volume>50</output>
</div>
- I can't get the value of the slider to update as I'm moving the slider. (Would this even work on a per control basis?)
function outputUpdate(vol) {
document.querySelector('#volume').value = vol;
}
2 answers
solution1
3 ACCPTED 2015-08-17 18:37:49
Line Wrap Issue
Change <div class="color-box"></div> to <span class="color-box"></span> . (In your original code, you forgot a closing > ). A div is a block element , and will always take up a whole line, unless you specify otherwise with display: inline-block;
In this case, because the color-box is empty, you need to add display: inline-block regardless, otherwise it will not take up space, and width will be 1 .
Slider Issue
As for the function, it looks like you're calling the function before it is defined. Make sure the script appears before the HTML. (For JSFiddle, set No wrap - in <body> on the left hand side)
For future reference, you should check the console / debugger. In this case it shows
ReferenceError: outputUpdate is not defined
which tells us the issue.
Nitpicks
Change ...id=volume... to ...id="volume"... and ...id=fader... to ...id="fader" ... . Also, while it will still work as you have it, it's considered invalid HTML if you have more than one id of the same name. Change id to class for volume and fader .
One more issue
Now that you've changed id to class , your script won't work. So now remove the oninput="outputUpdate(value)" and replace your script with:
$('.fader').on('input', function() {
var vol = $(this).val();
$(this).next('.volume').val(vol);
});
What this does is bind the input event to the function. What this means is, whenever you click on a slider , jQuery will trigger the code in the function block on a per control basis as you wanted. If you're new to jQuery, $(this) references the slider you clicked on (so we can differentiate between the 3 sliders you have).
The .next('.volume') will select the next volume class (otherwise your code will just update the first volume output, regardless of slider used) and then apply the value change.
Working example
Here's your JSFiddle with the changes added for you.
solution2
1 2015-08-17 18:41:22
I would add css to format the display to be horizontal (I also changed the color-box to be a span.
.group-controls input,span,output{
display:inline-block;
}
You should also change id=fader to class=fader since ids should be unique, here is a working fiddle
Or here is an example:
$('.color-box').colpick({ colorScheme: 'dark', layout: 'rgbhex', color: 'ff8800', onSubmit: function(hsb, hex, rgb, el) { $(el).css('background-color', '#' + hex); $(el).colpickHide(); } }) .css('background-color', '#ff8800'); function outputUpdate(vol) { document.querySelector('#volume').value = vol; }
.color-box { width: 20px; height: 20px; margin: 5px; border: 1px solid black; } .group-controls input, span, output { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <link href="http://web.stakinc.com/test/css/colpick.css" rel="stylesheet" /> <script src="http://web.stakinc.com/test/js/colpick.js"></script> <form> <fieldset> <legend>Group 1:</legend> <div class="group-controls"> <input type="checkbox"> <span class="color-box"></span> <input type=range min=0 max=100 value=50 class='fader' step=1 oninput="outputUpdate(value)"> <output for=fader id=volume>50</output> </div> <div class="group-controls"> <input type="checkbox"> <span class="color-box"></span> <input type=range min=0 max=100 value=50 class='fader' step=1 oninput="outputUpdate(value)"> <output for=fader id=volume>50</output> </div> <div class="group-controls"> <input type="checkbox"> <span class="color-box"></span> <input type=range min=0 max=100 value=50 class='fader' step=1 oninput="outputUpdate(value)"> <output for=fader id=volume>50</output> </div> </fieldset> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.