cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

show exact slider values for better fine tuning

Browse Source
This commit is contained in:
Georg Fischer 2013-09-20 20:50:27 +02:00
parent c497b9fb87
commit f4aa6dc224
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -13,19 +13,19 @@
</article> </article>
<div class="content" id="controls"> <div class="content" id="controls">
<div class="control-wrapper"> <div class="control-wrapper">
<label class="control-label" for="amount">glitch amount</label> <label class="control-label" for="amount">glitch amount <span class="control-slider-value"></span></label>
<input class="control-input" type="range" id="amount" min="0" max="100" value="50" /> <input class="control-input" type="range" id="amount" min="0" max="100" value="50" />
</div> </div>
<div class="control-wrapper"> <div class="control-wrapper">
<label class="control-label" for="seed">seed</label> <label class="control-label" for="seed">seed <span class="control-slider-value"></span></label>
<input class="control-input" type="range" id="seed" min="0" max="100" value="50" /> <input class="control-input" type="range" id="seed" min="0" max="100" value="50" />
</div> </div>
<div class="control-wrapper"> <div class="control-wrapper">
<label class="control-label" for="iterations">iterations</label> <label class="control-label" for="iterations">iterations <span class="control-slider-value"></span></label>
<input class="control-input" type="range" id="iterations" min="1" max="50" value="5" /> <input class="control-input" type="range" id="iterations" min="1" max="50" value="5" />
</div> </div>
<div class="control-wrapper"> <div class="control-wrapper">
<label class="control-label" for="quality">jpg quality</label> <label class="control-label" for="quality">jpg quality <span class="control-slider-value"></span></label>
<input class="control-input" type="range" id="quality" min="1" max="90" value="50" /> <input class="control-input" type="range" id="quality" min="1" max="90" value="50" />
</div> </div>
</div> </div>

8
scripts/src/controls.js vendored
View File

@ -23,6 +23,7 @@ define(
control.addEventListener( 'change', controlUpdated, false ); control.addEventListener( 'change', controlUpdated, false );
updateValue( control.id, control.value ); updateValue( control.id, control.value );
updateValueInUI( control.id, control.value );
} }
is_initialized = true; is_initialized = true;
@ -36,6 +37,7 @@ define(
var target = event.target; var target = event.target;
updateValue( target.id, target.value ); updateValue( target.id, target.value );
updateValueInUI( target.id, target.value );
} }
function updateValue( key, value ) function updateValue( key, value )
@ -48,6 +50,12 @@ define(
} }
} }
function updateValueInUI( key, value )
{
var el = document.querySelectorAll( 'label[for="' + key + '"] .control-slider-value' )[0];
el.innerHTML = value;
}
return { init: init }; return { init: init };
} }
); );

8
styles/global.css
View File

@ -83,12 +83,20 @@ a:hover
color: #666; color: #666;
} }
.control-slider-value
{
display: inline-block;
color: #333;
float: right;
}
.control-input .control-input
{ {
display: block; display: block;
width: 100px; width: 100px;
} }
#import-input #import-input
{ {
display: none; display: none;