1

I have a third-party web-based poll application. One question asks the user to enter a number. I'd like to have a slider there instead, whereby the final position of the slider on the numeric slider scale gets pushed into the application's number input field. I can't change the HTML coming from the app, but they do let me add CSS and JavaScript.

As a database/analytics person who has been asked to look at this HTML/CSS/JS/UI issue, I don't know how to "connect the dots" to integrate the slider into the app, using CSS or JavaScript or whatever, overlay the slider atop the number, but still send only one field back with the submit.

halfer
  • 19,824
  • 17
  • 99
  • 186
james beam
  • 11
  • 2

2 Answers2

0

You'd need to bind an input element's value to the slider's value upon the 'slide' event. Here's a JSBin example.

In practice, you'd generally use an <input type="hidden" /> element to hold this value, which will get posted with the form but will remain transparent to the user.

dperish
  • 1,493
  • 16
  • 27
0

As @dperish said earlier, you'd probably need to use something like jquery-ui's slider.

Since you can't change the HTML of the document, what you can do is something along the lines:

1) Create a div dynamically using jquery with an id or a class, using something like this.

2) Place the div to the location you want (i.e. above/below the input that already exists). For step 1 and 2, check this out: Creating a div element in jQuery

3) Initiate the slider on this dynamically created div and use @dperishe's answer to change the input's value to the slider's value on slide.

4) Hide the initial input using CSS.

I think if you follow the above steps, the end result will be what you are after.

Community
  • 1
  • 1
Theodoros Klikas
  • 2,059
  • 1
  • 11
  • 7