SpanText is currently free. Yes … very cool, I know, I know. Thank you. This includes the Javascript and CSS for SpanText functionality – everything that makes sliders appear on a page and animates text. The text itself must be written manually in HTML.

as WordPress Plugin: (or install the plugin through the WordPress plugins screen).


Add to the page the following files:

  • spantext.js – the main script that makes the sliders and animates text.
  • spantext-nouislider.js – a modified noUiSlider that makes the sliders interface pretty (required).
  • spantext.css – required CSS

or to install as a plugin in WordPress:

  1. Upload all the files to the `/wp-content/plugins/spantext` directory, or install the plugin through the WordPress plugins screen.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress.

(spantext.php is required for WordPress only. It safely enqueues the JavaScript, CSS, and enables the shortcode – see below. Delete or disregard this if not using with WordPress.)


Add a slider to the page with the following HTML:

<div class="spantextslider" type="input"id="MySpanText" data-spantextmin="1" data-spantextmax="5.5" data-spantextattrR="longer" data-spantextattrL="shorter" data-spantextspeed="20" data-spantextinit="1" ></div>

Other than class which must be “spantextslider” and type which must be “input”, values are examples only.

  • id: (required) : This is the unique identifier of the slider itself. The ID is arbitrary but must be unique within the HTML document. Use something unlikely to be used for another element, such as very specific description of the content of the slider.
  • data-spantextmin (optional) : The lowermost value of the slider. Default is 1.
  • data-spantextmax: (optional) : This is the maximum upper value of the slider, or in other words,  its number of gradations. Default is 10.
  • data-spantextspeed: (optional): A number from 1 to 100 indicating how quickly this slider should reveal and conceal its text. 1 is slowest, 100 is nearly instantaneous. Default is 1.
  • data-initialsetting: (optional): A number indicating where the slider should be set when the page initially loads (must be equal to or less than “max”). Default is 1.
  • data-rightwardattribute: (optional, but you need at least a leftward or a rightward attribute for the slider to do anything) : This is name of the span class that will reveal as the slider moves right, and be hidden as the slider moves left. You can choose any names you like.
  • data-leftwardattribute: (optional, but you need at least a leftward or a rightward attribute for the slider to do anything) : This is name of the span class that will reveal as the slider moves left and be hidden as the slider moves right. You can choose any names you like.

In WordPress, the following shortcode will accomplish the same, with attribute names corresponding to the similar ones above:

[spantext-slider id=" " min=" " max=" " speed=" " initialsetting=" " rightwardattribute= " " leftwardattribute=" " ]

Writing Text

To create text that interacts intricately with SpanText sliders requires some skill with HTML, specifically understanding of:

  • Classes: Classes are used to group elements of a web page so they can be all identified as belonging together. In SpanText documents, classes are used to “hook” text so it can be identified and manipulated using JavaScript. Learn more about this at
  • Span tags: Span tags group inline-elements – elements that appear without a line break, such as continuous text on a line. Learn more at

Use any plain text or HTML editor, such as those included with operating systems (TextEdit on Mac or Notepad on Windows operating systems) or any of several other free or commercially available text editors: AtomTextMate, Sublime TextNotepad++, etc. If applying SpanText to an existing document, copy the existing document into the editor.

To make a segment of text controllable with a SpanText slider, enclose it in a span tag as follows:

<span class="[attribute][gradation]">Text content goes here.</span>

[attribute] is one of the attributes you have defined using leftwardattribute or rightwardattribute in a slider shortcode.

[gradation] is a number equal to or less than the max value you defined in the slider shortcode.

Note that quotation marks must surround the class name, the brackets should not be included (these are for clarity in documentation), and there are no spaces or hyphens.

The segment of text you want enclosed should being immediately following the final ‘>’ symbol. Be sure to use a closing span tag at the end of the text segment.


<span class="longer3">This text will appear when the slider with attribute "longer" gets to gradation 3.</span>

Complex texts with many versions and/or nesting of content are time-consuming and require careful HTML coding. Good text editors such as those listed above provide syntax highlighting which makes it a little easier. Look at the examples on this site and try out the code fiddles to see how it’s done.

If the text is concealing or revealing incorrectly, it is most likely a misplaced or omitted closing span tag.

Leave a Reply

Your email address will not be published. Required fields are marked *