Just apply the image to the background in CSS:
<form>
<label for="text-1">Text input:</label>
<input type="text" name="text-1" id="text-1" value="hello world!" />
</form>
#text-1 {
background-image: url("http://lorempixel.com/1000/40/abstract/1/") !important;
color: white;
text-shadow: 0 1p 0 #333;
}
UPDATE: OP wants background on slider handle too:
Add a container around the slider to make the CSS selector easier:
<div id="sliderContainer">
<label for="slider-1">Slider:</label>
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
</div>
Apply the background to the div with class of .ui-slider-handle inside the container:
#sliderContainer .ui-slider-handle {
background-image: url("http://lorempixel.com/80/80/abstract/3/") !important;
}
Updated DEMO