Our family of I2C-friendly user interface elements grows by one with this new product that makes it plug-n-play-easy to add a 75mm long slide potentiometer to any microcontroller or microcomputer with an I2C port.

Each breakout is 3" long and 0.8" wide, with a single linear slide pot in the center. Underneath, there are four under-lighting NeoPixels that can display any RGB color. In the middle, a small microcontroller takes I2C commands and converts them to analog reads (of the potentiometer) and NeoPixel control. Goes great with our Stemma QT rotary encoder and 1x4 NeoKey QT breakout.

Thanks to the Stemma QT / Qwiic connectors underneath, you can easily connect using QT cables - no soldering required! There's even four I2C selection jumpers that you can cut to change the address from the default 0x30 to any value up to 0x3F so up to 16 slide pots can all share one chained cable.

To get you going fast, we spun up a custom-made PCB with the seesaw chip and all supporting circuitry for 3 or 5V power and logic. The STEMMA QT connectors on either side are compatible with the SparkFun Qwiic I2C connectors. This allows you to make solderless connections between your development board and the rotary encoder or to chain them with a wide range of other sensors and accessories using a compatible cable. QT Cable is not included, but we have a variety in the shop.

You can use our Arduino library to control and read data with any compatible microcontroller. We also have CircuitPython/Python code for use with computers or single-board Linux boards.

The NeoSlider has STEMMA QT connectors on it which make getting started with it super simple, but it also has header pins available for breadboard use. This page details the features of the NeoSlider.

Slide Potentiometer

On the top of the NeoSlider is the 75mm long linear slide potentiometer. It is on pin 18 of the ATtiny microcontroller.

NeoPixel LEDs

Along the bottom, under the slide potentiometer, are four RGB NeoPixel LEDs. They are reverse-mount, and attached to the bottom pointed upward to shine through the board and potentiometer. They are on pin 14 on the ATtiny microcontroller.

STEMMA QT Connectors

On the bottom of the board, located one-third of the way from each end of the board, are two STEMMA QT connectors. These allow you to connect to development boards with STEMMA QT connectors or to other breakouts using various associated accessories.

ATtiny Microcontroller

The NeoSlider breakout uses an ATtiny817 microcontroller to take I2C commands and converts them to analog reads (of the potentiometer) and for NeoPixel control.

Through-Hole Pads

In the center of the board, on each edge, are a set of six through-hole pads for use with header pins and a solderless breadboard. They are labeled on the top and the bottom of the board for easy identification.

When viewed from the of the top of the board:

  • VIN - This is the power pin. Since the chip can use 3 or 5 VDC. To power the board, give it the same power as the logic level of your microcontroller - e.g. for a 5V microcontroller like Arduino, use 5V.
  • GND - This is the ground pin. It is the common ground for power and logic.
  • SCL - This is the I2C clock pin. Connect to your microcontroller I2C clock line. This pin can use 3-5V logic, and there's a 10K pullup on this pin to VIN.
  • SDA - This is the I2C data pin. Connect to your microcontroller I2C data line. This pin can use 3-5V logic, and there's a 10K pullup on this pin to VIN.
  • INT - This is the interrupt pin. The Seesaw allows for setting GPIO interrupts. This pin will go low when a button is pressed.
  • UPDI - This is the single-pin Unified Program and Debug Interface for the ATtiny817. This pin is for external programming or on-chip-debugging.

Address Jumpers

In the center of the back of the board are four address jumpers. These jumpers allow you to chain up to 16 of these boards on the same pair of I2C clock and data pins. To do so, you cut the traces between the the two pads.

The default I2C address is 0x30. The other address options can be calculated by “adding” the A0/A1/A2/A3 to the base of 0x30.

A0 sets the lowest bit with a value of 1, A1 sets the next bit with a value of 2, A2 sets the next bit with a value of 4, and A3 sets the high bit with a value of 8. The final address is 0x30 + A3 + A2 + A1 + A0 which would be 0x3F.

  • 
If only A0 is cut, the address is 0x30 + 1 = 0x31
  • 
If only A1 is cut, the address is 0x30 + 2 = 0x32
  • 
If only A2 is cut, the address is 0x30 + 4 = 0x34
  • If only A3 is cut, the address is 0x30 + 8 = 0x38


So for example if A2 is cut and A0 is cut, the address is 0x30 + 4 + 1 = 0x35.

The table below shows all possible addresses, and whether the pin should be high (cut) or low (closed).

Power LED and Jumper

In the lower left corner, on the back of the board, is the power LED, labeled on. To the left of the LED is the power LED jumper pad, which defaults to closed. Cut the trace to disable the power LED. Once cut, you can solder it closed again to enable the LED.

It's easy to use the NeoSlider with CircuitPython using the Adafruit CircuitPython seesaw library. It allows you to write Python code to read the potentiometer values and control the NeoPixel LEDs.

You can use the NeoSlider with any CircuitPython microcontroller board or with a computer that has GPIO and Python thanks to Adafruit_Blinka, our CircuitPython-for-Python compatibility library.

CircuitPython Microcontroller Wiring

First wire up a NeoSlider breakout to your board exactly as follows. The following is the breakout wired to a Feather using the STEMMA connector:

  • Board 3V to breakout VIN (red wire)
  • Board GND to breakout GND (black wire)
  • Board SCL to breakout SCL (yellow wire)
  • Board SDA to breakout SDA (blue wire)

The following is the breakout wired to a Feather using a solderless breadboard:

  • Board 3V to breakout VIN (red wire)
  • Board GND to breakout GND (black wire)
  • Board SCL to breakout SCL (yellow wire)
  • Board SDA to breakout SDA (blue wire)

Python Computer Wiring

Since there's dozens of Linux computers/boards you can use we will show wiring for Raspberry Pi. For other platforms, please visit the guide for CircuitPython on Linux to see whether your platform is supported

Here's the Raspberry Pi wired with I2C using the STEMMA connector:

  • Pi 3V to breakout VIN (red wire)
  • Pi GND to breakout GND (black wire)
  • Pi SCL to breakout SCL (yellow wire)
  • Pi SDA to breakout SDA (blue wire)

Here's the Raspberry Pi wired with I2C using a solderless breadboard:

  • Pi 3V to breakout VIN (red wire)
  • Pi GND to breakout GND (black wire)
  • Pi SCL to breakout SCL (yellow wire)
  • Pi SDA to breakout SDA (blue wire)

Python Installation of seesaw Library

You'll need to install the Adafruit_Blinka library that provides the CircuitPython support in Python. This may also require enabling I2C on your platform and verifying you are running Python 3. Since each platform is a little different, and Linux changes often, please visit the CircuitPython on Linux guide to get your computer ready!

Once that's done, from your command line run the following command:

  • pip3 install adafruit-circuitpython-seesaw

If your default Python is version 3 you may need to run pip instead. Just make sure you aren't trying to use CircuitPython on Python 2.x, it isn't supported!

CircuitPython & Python Usage

To demonstrate using this breakout with CircuitPython, you'll install the necessary libraries, update your code, and then connect to the serial console to see the information printed out.

To use the NeoSlider breakout with CircuitPython, you need to first install the seesaw library, and its dependencies, into the lib folder on your CIRCUITPY drive.

Then you need to update code.py.

Click the Download Project Bundle button below to download the necessary libraries and the code.py file in a zip file. Extract the contents of the zip file, and copy the entire lib folder and the code.py file to your CIRCUITPY drive.

# SPDX-FileCopyrightText: 2021 Kattni Rembor for Adafruit Industries
# SPDX-License-Identifier: MIT
"""
NeoSlider NeoPixel Rainbow Demo
"""
import board
from rainbowio import colorwheel
from adafruit_seesaw.seesaw import Seesaw
from adafruit_seesaw.analoginput import AnalogInput
from adafruit_seesaw import neopixel

# NeoSlider Setup
neoslider = Seesaw(board.I2C(), 0x30)
potentiometer = AnalogInput(neoslider, 18)
pixels = neopixel.NeoPixel(neoslider, 14, 4)


def potentiometer_to_color(value):
    """Scale the potentiometer values (0-1023) to the colorwheel values (0-255)."""
    return value / 1023 * 255


while True:
    print(potentiometer.value)
    # Fill the pixels a color based on the position of the potentiometer.
    pixels.fill(colorwheel(potentiometer_to_color(potentiometer.value)))

Now, connect to the serial console to see the potentiometer values printed out. Try moving the potentiometer slider to see the values change, and the NeoPixels change color!

That's all there is to using the NeoSlider with CircuitPython to read potentiometer values and control the built-in NeoPixels!

The Adafruit NeoSlider uses a seesaw chip. To use the NeoSlider with Arduino, you'll use the Adafruit Seesaw library. With the STEMMA QT connectors, you can easily get started with no soldering necessary!

I2C Wiring

Here is how to wire up the breakout using one of the STEMMA QT connectors. The examples show a Metro but wiring will work the same for an Arduino or other compatible board.

  • Connect board VIN (red wire) to Arduino 5V if you are running a 5V board Arduino (Uno, etc.). If your board is 3V, connect to that instead.
  • Connect board GND (black wire) to Arduino GND
  • Connect board SCL (yellow wire) to Arduino SCL
  • Connect board SDA (blue wire) to Arduino SDA

Here is how to wire the breakout to a board using a solderless breadboard. To do this, you must solder header pins to the breakout.

  • Connect board VIN (red wire) to Arduino 5V if you are running a 5V board Arduino (Uno, etc.). If your board is 3V, connect to that instead.
  • Connect board GND (black wire) to Arduino GND
  • Connect board SCL (yellow wire) to Arduino SCL
  • Connect board SDA (blue wire) to Arduino SDA

Library Installation

You can install the Adafruit Seesaw library for Arduino using the Library Manager in the Arduino IDE.

Click the Manage Libraries ... menu item, search for seesaw , and select the Adafruit seesaw library:

When asked to install the Adafruit Seesaw library dependencies, click Install all.

Load Single NeoSlider Example

Open the following example into the Arduino IDE.

// SPDX-FileCopyrightText: 2021 Kattni Rembor for Adafruit Industries
// SPDX-License-Identifier: MIT
/*
 * This example shows how read the potentiometer on the I2C QT Slide Potentiometer
 * and make the NeoPixels change too!
 */

#include "Adafruit_seesaw.h"
#include <seesaw_neopixel.h>

#define  DEFAULT_I2C_ADDR 0x30
#define  ANALOGIN   18
#define  NEOPIXELOUT 14

Adafruit_seesaw seesaw;
seesaw_NeoPixel pixels = seesaw_NeoPixel(4, NEOPIXELOUT, NEO_GRB + NEO_KHZ800);

void setup() {
  Serial.begin(115200);

  //while (!Serial) delay(10);   // wait until serial port is opened

  Serial.println(F("Adafruit PID 5295 I2C QT Slide Potentiometer test!"));

  if (!seesaw.begin(DEFAULT_I2C_ADDR)) {
    Serial.println(F("seesaw not found!"));
    while(1) delay(10);
  }

  uint16_t pid;
  uint8_t year, mon, day;

  seesaw.getProdDatecode(&pid, &year, &mon, &day);
  Serial.print("seesaw found PID: ");
  Serial.print(pid);
  Serial.print(" datecode: ");
  Serial.print(2000+year); Serial.print("/");
  Serial.print(mon); Serial.print("/");
  Serial.println(day);

  if (pid != 5295) {
    Serial.println(F("Wrong seesaw PID"));
    while (1) delay(10);
  }

  if (!pixels.begin(DEFAULT_I2C_ADDR)){
    Serial.println("seesaw pixels not found!");
    while(1) delay(10);
  }

  Serial.println(F("seesaw started OK!"));

  pixels.setBrightness(255);  // half bright
  pixels.show(); // Initialize all pixels to 'off'
}



void loop() {
  // read the potentiometer
  uint16_t slide_val = seesaw.analogRead(ANALOGIN);
  Serial.println(slide_val);

  for (uint8_t i=0; i< pixels.numPixels(); i++) {
    pixels.setPixelColor(i, Wheel(slide_val / 4));
  }
  pixels.show();

  delay(50);
}



// Input a value 0 to 255 to get a color value.
// The colours are a transition r - g - b - back to r.
uint32_t Wheel(byte WheelPos) {
  WheelPos = 255 - WheelPos;
  if(WheelPos < 85) {
    return seesaw_NeoPixel::Color(255 - WheelPos * 3, 0, WheelPos * 3);
  }
  if(WheelPos < 170) {
    WheelPos -= 85;
    return seesaw_NeoPixel::Color(0, WheelPos * 3, 255 - WheelPos * 3);
  }
  WheelPos -= 170;
  return seesaw_NeoPixel::Color(WheelPos * 3, 255 - WheelPos * 3, 0);
}

After opening the NeoSlider.ino file, upload it to the Arduino wired to your NeoSlider. Open the Serial Monitor at 115200 baud. You should see the following as the sketch starts up.

Now try moving the potentiometer to see the values change and the NeoPixels change color.

That's all there is to using the NeoSlider with Arduino!

Dual NeoSlider Example

The Adafruit NeoSlider comes with two STEMMA QT connectors, making it super simple to chain up multiple sliders.

Dual I2C Wiring

Here is how to wire up two breakouts using two of the STEMMA QT connectors. The examples show a Metro but wiring will work the same for an Arduino or other compatible board.

  • Board 1 VIN (red wire) to Arduino 5V
  • Board 1 GND (black wire) to Arduino GND
  • Board 1 SCL (yellow wire) to Arduino SCL
  • Board 1 SDA (blue wire) to Arduino SDA
  • Board 2 VIN (red wire) to board 1 VIN
  • Board 2 GND (black wire) to board 1 GND
  • Board 2 SCL (yellow wire) to board 1 SCL
  • Board 2 SDA (blue wire) to board 1 SDA
Cut the A0 address trace on *one* of the sliders so that the I2C addresses don't conflict

Load Dual NeoSlider Example

Open the following example into the Arduino IDE. 

// SPDX-FileCopyrightText: 2021 Kattni Rembor for Adafruit Industries
// SPDX-License-Identifier: MIT
/*
 * This example shows how read the potentiometer on two I2C QT Slide Potentiometers
 * and make the NeoPixels change too!
 */

#include "Adafruit_seesaw.h"
#include <seesaw_neopixel.h>

#define  DEFAULT_I2C_ADDR 0x30
#define  ANALOGIN   18
#define  NEOPIXELOUT 14

Adafruit_seesaw seesaw1;
Adafruit_seesaw seesaw2;
seesaw_NeoPixel pixels1 = seesaw_NeoPixel(4, NEOPIXELOUT, NEO_GRB + NEO_KHZ800);
seesaw_NeoPixel pixels2 = seesaw_NeoPixel(4, NEOPIXELOUT, NEO_GRB + NEO_KHZ800);

void setup() {
  Serial.begin(115200);

  //while (!Serial) delay(10);   // wait until serial port is opened

  Serial.println(F("Adafruit PID 5295 I2C QT Slide Potentiometer test!"));

  if (!seesaw1.begin(DEFAULT_I2C_ADDR) || !seesaw2.begin(DEFAULT_I2C_ADDR+1)) {
    Serial.println(F("seesaws not found!"));
    while(1) delay(10);
  }

  uint16_t pid;
  uint8_t year, mon, day;

  seesaw1.getProdDatecode(&pid, &year, &mon, &day);
  Serial.print("seesaw found PID: ");
  Serial.print(pid);
  Serial.print(" datecode: ");
  Serial.print(2000+year); Serial.print("/");
  Serial.print(mon); Serial.print("/");
  Serial.println(day);

  if (pid != 5295) {
    Serial.println(F("Wrong seesaw PID"));
    while (1) delay(10);
  }

  if (!pixels1.begin(DEFAULT_I2C_ADDR) || !pixels2.begin(DEFAULT_I2C_ADDR+1)){
    Serial.println("seesaw pixels not found!");
    while(1) delay(10);
  }

  Serial.println(F("seesaw started OK!"));

  pixels1.setBrightness(255);  // half bright
  pixels2.setBrightness(255);  // half bright
  pixels1.show(); // Initialize all pixels to 'off'
  pixels2.show(); // Initialize all pixels to 'off'
}



void loop() {
  // read the potentiometer
  uint16_t slide1_val = seesaw1.analogRead(ANALOGIN);
  uint16_t slide2_val = seesaw2.analogRead(ANALOGIN);
  Serial.print(slide1_val);
  Serial.print(", ");
  Serial.println(slide2_val);

  for (uint8_t i=0; i< pixels1.numPixels(); i++) {
    pixels1.setPixelColor(i, Wheel(slide1_val / 4));
    pixels2.setPixelColor(i, Wheel(slide2_val / 4));
  }
  pixels1.show();
  pixels2.show();

  delay(50);
}



// Input a value 0 to 255 to get a color value.
// The colours are a transition r - g - b - back to r.
uint32_t Wheel(byte WheelPos) {
  WheelPos = 255 - WheelPos;
  if(WheelPos < 85) {
    return seesaw_NeoPixel::Color(255 - WheelPos * 3, 0, WheelPos * 3);
  }
  if(WheelPos < 170) {
    WheelPos -= 85;
    return seesaw_NeoPixel::Color(0, WheelPos * 3, 255 - WheelPos * 3);
  }
  WheelPos -= 170;
  return seesaw_NeoPixel::Color(WheelPos * 3, 255 - WheelPos * 3, 0);
}

After opening the Arduino_NeoSlider_Dual file, upload it to the Arduino wired to your NeoSlider. Open the Serial Monitor at 115200 baud to see the potentiometer values printed out.

Try moving the sliders to see the values and the NeoPixel colors change.

That's all there is to using two NeoSliders with Arduino!

This guide was first published on Dec 11, 2021. It was last updated on 2021-12-27 13:34:45 -0500.