▼
Streaming live at 10am (PST)

Javascript Sliders Let Users Manipulate Input Fields

Design help Custom code
#1

I’m building a site for a type foundry and am trying to get some functionality that is ‘basic’ to these types of websites, but not basic to ordinary ones.

I’d like to allow users to interact with a slider UI element that changes the size of the font. I’d also like for them to see pre-filled text, and be able to change the text.

I believe I have to have my sample text as an Input Field, then use Javascript to manipulate it.

Here’s an illustration of what I’m trying to do:
Video of what I’m trying to accomplish: Loom | Free Screen & Video Recording Software
Example Page in action: National fonts · Klim Type Foundry

I’ve found this webflow example: Webflow - pricing-tables

That uses this java: https://rangeslider.js.org/
But I’m too code-deaf to be able to get the whole thing working without a step-by-step. Help please!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Yeah you have to write a custom script for that. I would try to find a good developer to help you with this.

#3

Thanks for this, @felix_hellstrom. Do you happen to be connected to any who might be able to do it?

#4

Yeah I can have a look around. Hit me up on my email and we can talk there fehellstrom@gmail.com

#5

@Kaleb_Dean you could use ion range slider, it is better maintained than the range slider you suggested. You could write a simple onChange function that would get the from value of the slider and apply it to the css style of your input. Something like so:

HTML

<div id="controls">
  <input id="slider" type="text" name="slider" />
</div>
<input id="input" type="text" name="input">

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  // 🍓 global variables
  const $slider = $("#slider"),
    $input = $("#input");

  // 🍑 slider magic
  $slider.ionRangeSlider({
    min: 16,
    max: 60,
    from: 20,
    onStart: (data) => {
      $input.prop("placeholder", "type something");
    },
    onChange: (data) => {
      let value = data.from,
        factor = 1; // optional
      $input.css("font-size", `${value * factor}px`);
    }
  });
});

Here is a quick codepen I dropped for you:

EDIT:
You can of course change the appearance of the slider with some custom css rules if you like.

#7

I had to poke around to find how to/which style sheets and java sources to link, but I think I’ve got it working!

1 Like